homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Footer problems
webMASTERP




msg:1181135
 4:04 pm on Jun 25, 2004 (gmt 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?

 

SethCall




msg:1181136
 5:31 pm on Jun 25, 2004 (gmt 0)

Good thread here [webmasterworld.com...]

webMASTERP




msg:1181137
 5:51 pm on Jun 25, 2004 (gmt 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

SethCall




msg:1181138
 7:17 pm on Jun 25, 2004 (gmt 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

createErrorMsg




msg:1181139
 7:19 pm on Jun 25, 2004 (gmt 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.

TheBlueEyz




msg:1181140
 7:32 pm on Jun 25, 2004 (gmt 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.

webMASTERP




msg:1181141
 12:11 pm on Jun 28, 2004 (gmt 0)

createErrorMsg and TheBlueEyz, thanks, that did the trick

webMASTERP




msg:1181142
 12:21 pm on Jun 28, 2004 (gmt 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

createErrorMsg




msg:1181143
 4:07 pm on Jun 28, 2004 (gmt 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.

webMASTERP




msg:1181144
 6:07 pm on Jun 28, 2004 (gmt 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 :)

TheBlueEyz




msg:1181145
 7:38 pm on Jun 28, 2004 (gmt 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved