chronister Posted April 21, 2007 Share Posted April 21, 2007 I am trying to build by standards and not use tables for my layout. I am having problems getting my footer to drop to the bottom. Here is the code. <html> <head> <style type="text/css" > <!-- #contents { margin-right:auto; margin-left:auto; display:block; width: 703px; height:100%; background-color: #FFF; text-align:left; } body { background-color: #f0f0f0; margin-bottom:0; margin-top:0; text-align:center; } #footer { background-color: #6A8CA5; bottom: 0px; text-align: center; color: #FFFFFF; } html,body { height:100%; } --> </style> <title>Untitled Document</title> </head> <body> <div id="contents" > <div><img src="images/banner.jpg" width="703" height="187"></div> <div><img src="images/nav.jpg"</div> <div>Content Goes Here</div> <div id="footer">Copyright 2007 MyCompany.com</div> </div> </body> </html> I want #contents to take up 100% height even if there is not enough content to push it down and it does. I want the footer <div> tag to be at the bottom of the content again even if the content does not fill the whole viewable area. It does not. I know a little CSS, but cannot figure out how to drop it to the bottom. I have tried margin-bottom:0px; and bottom:0px; Neither of these worked. Any suggestions on what I am doing wrong here? Screenshot is attached. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Copyright Posted April 21, 2007 Share Posted April 21, 2007 One solution is to use relative positioning for the contents div, and absolute for the footer to make it stick to the bottom. <style type="text/css" > <!-- #contents { margin-right:auto; margin-left:auto; position:relative; display:block; width: 703px; height:100%; background-color: #FFF; text-align:left; } body { background-color: #f0f0f0; margin-bottom:0; margin-top:0; text-align:center; } #footer { position:absolute; bottom: 0px; background-color: #6A8CA5; text-align: center; color: #FFFFFF; } html,body { height:100%; } --> </style> Later. Quote Link to comment Share on other sites More sharing options...
chronister Posted April 21, 2007 Author Share Posted April 21, 2007 Sweet. That did it. I did not specify relative positioning in the #contents section, but did specify absolute in the #footer. I then had to make the width of that selector 703px to match the width of the rest of it. Does the relative positioning make a big difference? It renders correctly in both FF and IE so should I be concerned with anything there? I really do want to learn to code by standards and get away from table layouts as they are fairly clunky at times. Thank you for your help. Quote Link to comment Share on other sites More sharing options...
Copyright Posted April 21, 2007 Share Posted April 21, 2007 It does work for now, but when you'll have more content on your page then one screen height, the text will get behind the footer insted to push it down as it hapends with floated elements. This is because the footer is absolute positioned on the page. The solution is to apply some bottom padding to the contents div to stop the text from getting behind the footer. Any value equal or higher then the footer height will do. P.S: I appologize for my bad English. Later. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 23, 2007 Share Posted April 23, 2007 you can set the #footer div to have relative position and then give it bottom: 0; #footer { position: relative; bottom: 0px; background-color: #6A8CA5; text-align: center; color: #FFFFFF; } Quote Link to comment Share on other sites More sharing options...
chronister Posted April 26, 2007 Author Share Posted April 26, 2007 Thanks for the help Copyright & ToonMariner. @ToonMariner: The position:relative; bottom:0; did not work. @Copyright: You are right, the text ended up behind the footer. I tried what you suggested, and it did not work. I have said F^CK it and gone with the trusty old table layout. Worked perfectly the first time with none of the hassle. Will try for the css design another time. I just can't get the whole positioning with css down. I seem to end up with not enough space where I want it, or too much space. I am wimping out here and putting the correct way on the back burner for a while. Thanks, Nate Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 27, 2007 Share Posted April 27, 2007 you have to take the footer out of the parent div and place it as a first child of body. Give body and html height: 100% and all shoudl be sweet. Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted April 27, 2007 Share Posted April 27, 2007 please see this article http://www.themaninblue.com/writing/perspective/2005/08/29/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.