Welcome to WebmasterWorld Guest from 54.197.66.254

Forum Moderators: not2easy

Message Too Old, No Replies

Footer problems

     
4:04 pm on Jun 25, 2004 (gmt 0)

New User

10+ Year Member

joined:June 24, 2004
posts:9
votes: 0


This is the first time i am using CSS for layout
I like the clean look of the code so far, but i am having a hard time figuing out how to position my footer. I want it to always be at the bottom of the page, and not to overlap with any of my elements

Here's the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST1</title>
<style type="text/css">

body
{
margin:0px 0px 0px 0px;
padding:0px;
height:100%;
background:#364A75;

}
#leftcontent
{
position: absolute;
left:0px;
top:100px;
width:200px;
}
#centercontent
{
margin-top:0px;
margin-left: 200px;
margin-right:200px;
}
#rightcontent
{
position: absolute;
right:0px;
top:100px;
width:200px;
}

#header
{
background:#FF0000;
height:100px;
}
#footer
{
background:#0000FF;
height:100px;
}
#element
{
margin: 10px;
background:#fff;
border:1px solid #000;
}

</style>
</head>
<body>
<div id="header">Header content</div>
<div id="leftcontent">
<div id="element">
left block1
</div>
<div id="element">
left block2
</div>
<div id="element">
left block3
</div>
<div id="element">
left block4
</div>
</div>
<div id="centercontent">
<div id="element">
center block 1
</div>
</div>
<div id="rightcontent">
<div id="element">
right block 1
</div>
<div id="element">
right block 1
</div>
<div id="element">
right block 1
</div>
<div id="element">
right block 1
</div>
</div>
<div id="footer">footer content</div>
</body>
</html>


can you tell me what's wrong with that?
5:31 pm on June 25, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


Good thread here [webmasterworld.com...]

5:51 pm on June 25, 2004 (gmt 0)

New User

10+ Year Member

joined:June 24, 2004
posts:9
votes: 0


thanks for the link, but that didn't solve my problem
i need to footer to always appear at the bottom of the screen
i know a super easy way to do it with tables, but i made a commitment, and i am sticking to it
7:17 pm on June 25, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


oh, the bottom of the screen, vs bottom of the content eh?

I can't think of how to do this without min-height, (no IE support there), I could only think to do it with javascript

7:19 pm on June 25, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


You could replace your position:absolutes with float:left and float:right, then give the footer a clear:both.
That might do it for you.
7:32 pm on June 25, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0



You could replace your position:absolutes with float:left and float:right, then give the footer a clear:both.
That might do it for you.

That is the only way that works, that I'm aware of.

12:11 pm on June 28, 2004 (gmt 0)

New User

10+ Year Member

joined:June 24, 2004
posts:9
votes: 0


createErrorMsg and TheBlueEyz, thanks, that did the trick
12:21 pm on June 28, 2004 (gmt 0)

New User

10+ Year Member

joined:June 24, 2004
posts:9
votes: 0


Actually, i just discovered a small problem with that method
I have to make sure that the "centercontent" div is located under "leftcontent" and "rightcontent" in the code, or the result that i get is that the side DIVs are showing up under the "cetnercontent" DIV
4:07 pm on June 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


That's true, and I apologize for not mentioning it. All floated elements must come first in their parent container. This would mean that, in your code, the sidebars will be first, a problem if you're concerned about how the page looks in stylistically-challenged browsers (like NN4).

The solution (well, A solution) is to use negative margins to position the content where you want it. This is a process described by Ryan Brill in an A List Apart article about negative margins.

Another solution, one I've used but am not crazy about, is to use javascript to dynamically write the sidebar content into the page when it loads. The script can detect the browser and, if it finds Netscape 4.x, writes the code in a different place, thus displaying the page how you want.

I have seen pages (the one BlueEyz mentioned turns out to be one of them) that use position:absolutes and a clear: both in the footer. ThisAPPEARS to fix the problem, but actually doesn't. That site (and others like it) achieve the appearance of the effect you want by always keeping the content div fuller than the sidebars.

Bottom line, if you need the content first in the source code, I would check out the negative margins article.

Good luck and keep us posted.

6:07 pm on June 28, 2004 (gmt 0)

New User

10+ Year Member

joined:June 24, 2004
posts:9
votes: 0


Well, it's my pesronal website, so it's not that big of a deal where the content is. And i am not too worried about supporting Netscape 4. My code still looks a hell of a lot better then it did with tables. I'll read up on negative margins to get a better understanding of what you mean. I'd rather not use JavaScript for layout though. The only thing that's slightly bothering me, is that i can't figure out how to display the footer all the way at the bottom of the page, and not just after all the content. My graphic design looks pretty odd otherwise.

Other then that, style sheets are really growing on me :)

7:38 pm on June 28, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0


Same here :)

I created the HTML layout that I want for my templates (first decided how many elements I'd need, then simply stuck them in divs in the html), and now I'm creating different stylesheets for the exact same HTML document.

Working out pretty well so far! Hitting a few snags, this one in particular; putting elements in a different place on the page than where they appear in the code can be troublesome.

This negative margin thing.. is this considered an elegant solution?