I looked and tried so many solutions but for some reason this is not working for me. http://developer.surefirewebservices.com I can't get the damn footer to stay at the bottom. If you have the web developer plugin for firefox you can see the css and the source code, if not I'll just place a snippet: #Navigation_100 { width:100%; height:55px; background:url(/images/Nav_BG.gif) repeat-x; position:absolute; top:0px; } #header_100 { position:absolute; top: 55px; width:100%; background:url(/images/Header_BG.gif) top repeat-x; height:194px; } #header_arrow { bottom:1px; position:relative; } #body_100 { width:100%; position:absolute; top:249px; } #body_left { width:615px; float:left; } #body_right { width:309px; float:right; } #footer_100 { width:100%; position:absolute; bottom:0px; background:url(/images/footer_bg.gif) top repeat-x #000; height:183px; } #Navigation_Fixed, #header_Fixed, #body_fixed, #footer_fixed { width:924px; margin:0 auto; position:relative; } #body_fixed, #body_100, #body_left, #body_right { margin-bottom:-183px; padding-bottom:-183px; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } I Need Help!!!!!! Thanks! Also, It is a 2 colum layout so I'd like the footer to keep moving down if text is added to either column.
Looks like the footer div is set to be at the bottom of the "body_100" div - which doesn't stretch all the way down. Try moving the footer div so it's outside body_100 - at the same level as the navigation and header divs.
Forcing a footer to the bottom of the page is a holdover from print, and really doesn't have a place in web design. Be that as it may, there are still a lot of graphic designers with their heads firmly implanted in a warm dark place that insist on such silliness. So here's an old page, all dusted off and cleaned up that does just that. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content= "Lock your footer to the bottom of the screen or bottom of content, whichever is lower" /> <title>Footer at the bottom of the viewport | Gary Turner's html & css playpen</title> <style type="text/css"> /*<![CDATA[*/ html, body, #wrapper { min-height: 100%; /*Sets the min height to the height of the viewport.*/ width: 100%; height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/ margin: 0; padding: 0; } html>body #wrapper { height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/ } body { font: 100% verdana, helvetica, sans-serif; background-color: #fefefe; color: #333; } p { font-size: 1em; } h1, h2 { font-family: georgia, serif; text-align: center; text-transform: capitalize; } #wrapper { position: absolute; top: 0; left: 0; } #main { height: auto; padding: .5em; padding-bottom: 3em; /*Keeps content above footer. Originally used margin, but a bug in Opera7 seemed to add spurious margin, pushing the footer beyond the viewport even with short content. */ width: 80%; margin: 0 auto; } #pageheader { border: 0 none; display: table; width: 60%; } #pageheader p { color: #a00; float: left; font-family: georgia, serif; font-size: 2em; font-weight: bold; line-height: 1.2; margin: 0.67em 0 0; } #pageheader p span.light { color: #669; float: right; font-size: .75em; font-weight: normal; } #pageheader a { display: block; color: #a00; text-decoration: none; } #pageheader hr { clear: both; height: 1px; color: #999; background-color: #999; margin: 0 0 0 2em; } #footer { position: absolute; bottom: 0; width: 80%; margin-left: 10%; } .kern { letter-spacing: -.1em; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="main"> <div id="pageheader"> <p><a href="http://garyblue.port5.com/index.html">Gary <span class="kern">T</span>urner’s <br /> <span class="light">html and css playpen</span></a></p> <hr /> </div> <h1>Lock the footer to the bottom of viewport</h1> <p>The footer will sit at the bottom of the viewport unless the content pushes it down.</p> <p>Put your whole page in #main, everything except the footer.</p> <!-- uncomment the following to see long content --> <!-- <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> <p>spacer</p> --> </div><!-- end main --> <div id="footer"> <p>Put your footer stuff here.</p> </div><!-- end footer --> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary
Well, if the footer only stays at the bottom until content pushes is further, then the Paul O' B way can be used as well (html and body are 100% and #container (or #wrapper) is 100% min-height (height for IE), and the footer comes after this #container or #wrapper is closed. So the footer would end up below the viewport because the #container or #wrapper above it is100% height... so then you sit the footer on top of the end of the #container or #wrapper by setting a height, then giving it a negative top margin equal to the total height of the footer. Set position: relative to secure it in place (or footer links can't be clicked) and ta da. pseudo code: <body> <container><-- is set to 100% height <stuff> </stuff> </container> <footer></footer> </body> However, what if someone wants to imitate a frame and have a footer that always sits at the bottom of the viewport, covering the page behind it until the viewer has scrolled down to the end (where there would be some padding or something so that the footer doesn't always cover the last amount of content)? That's what I'd like to know... a fake frame footer.
Oh nevermind, those can be done too. Set the footer somewhere on the body but near the top. Then set it to position: absolute and set bottom: 0 pseudo html: <body> <footer></footer> <container> <wrapper> <stuff> </stuff> </wrapper> </container> </body> I'm not even sure container is necessary except that we likely want a 100% height page. html, body set to 100% height container set to min-height 100% (and * html #container {height: 100%;} for IE6 of course) #wrapper is there for setting a "global" bottom padding so when people have scrolled all the way down, the footer doesn't cover the content/text. Can't set this on #container (I did this mistake once... #container's already 100%, can't add more) The footer will always sit on the bottom. If you want that "frame" effect you can add overflow: auto to the wrapper or container to force scroll bars on that part but not the footer.
Thanks for you help everyone but I'm still having a problem. At one point the footer disappeared all together, and I tried to mess with the padding and margin but still a no go. 100% div height is a pain in the ass!
You have to be careful with this 100% stuff. All browsers except IE6 think 100% means 100%. That will certainly make your footer disappear! Only IE6 thinks you can add anything to 100% Looking at your code, you're kinda going at it wrong. That body_fixed div thingie? That should then be the first div after the <body> and the last one to close before the footer. You have to stuff everything inside, your header, navigation, everything. You're using body_fixed like Gary and I use #container (which is fine). But almost all of the page has to be in the 100% container. Second, you can't just say it everywhere. You need to tell all the smart browsers that the body_fixed is min-height: 100%. Then, you secretly tell IE6 that height:100% because IE6 will let height grow (it thinks height is min-height). So you need to hide that behind a start hack or something-- otherwise all the other browsers will see height: 100%-- and they'll honor it! Do this: html, body { height: 100%; } #body_fixed { min-height: 100%; other stuff; } * html #body_fixed {height: 100%;} There you go. Now, give the footer a set height, and then give it a negative top-margin to kick it up above the bottom of #body_fixed (since #body_fixed has at least 100% height it will go all the way down to the bottom no matter what). Now you've got the footer sitting (or floating sortof) above the bottom of #body_fixed. *
Ok, I added a container div tag instead of the body_fixed becuase that div is holding the 2 columns in place. I added the footer below the closing container tag. This is my code in the css: * { padding:0px; margin:0px; display:block; } html, body { background-color: #f8f7e9; height:100%; } #container { min-height:100%; width:100%; position:absolute; top: 0px; left: 0px; border:0px; } *html #container {_height:100%;} #footer_100 { width:100%; background:url(/images/footer_bg.gif) top repeat-x #000; height:183px; position:absolute; bottom:0px; margin-top:-183px; } Now the footer is on the bottom of the screen BUT when I scroll it doesn't stay at the bottom and it's over all of the content.
The page doesn't need all that silliness. It has enough content that there is no need to sweat the height. In any case, I gave you a working example. Why didn't you try it? gary
I did try it, I must've done something wrong cuz it left me with a footer at the bottom but it was overlapping the body content. In Any case: I did IT!!!!! I don't know how but holy crap!, it works in IE and FireFox. Check out the code: html, body { background-color: #f8f7e9; height:100%; } #container { width:100%; position:relative; top: 0px; left: 0px; border:0px; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } #body_fixed { height:auto !important; height:100%; min-height:100%; } #footer_100 { width:100%; background:url(/images/footer_bg.gif) top repeat-x #000; height:183px; position:relative; bottom:0px; left: 0px; margin-top:15px; _padding-top:15px; } And I have a container div wrapped around everything. It's displaying perfect. I understood why to use the negative margin but, I didn't and I don't know why this works. If anyone has any insight!! I'm just happy now! The Issue: My issue with the solutions before was that the footer wasn't staying at the bottom of the content. It would go to the bottom of the browser but then begin to overlay all of the content. When scrolling down, the footer would move up. Everytime I added more content the footer wouldn't move. But it's fixed now =) p.s. Thanks for all your help!!!!
I totally misunderstood you. I thought you wanted the footer always at the bottom of the viewport! You simply wanted it at the bottom of the content : ) The original problem was that you had set it to position:absolute which means it ignores the page and the page ignores it. Meaning that if the content grew (making the page longer) the footer wouldn't pay any attention to it. So Gary's example and the two I gave... all will make the footer cover the content because the point was to have the footer always at the bottom of someone's browser (even if the content was longer). So, actually, you don't even need an extra wrapper here-- all you needed was the footer to be the last in your HTML (like it is now) and set to position: relative or even no mention of position (which means it sits in the default of "static"-- both will be bumped further down as content (and the page) grow). Sorry : )
Actually, my example will cause the footer to stick to the bottom of the viewport, unless the content is longer; in which case it will be pushed down to be at the bottom of the content. cheers, gary