I’ve seen a lot of tutorials out there for how to have a fixed footer using CSS. Most of them require all kinds of nested div’s, wrappers, and so on. It’s really very simple, and this code can be copied and pasted into almost any website template without modifying the entire set up. See below.
CSS file:
.footer_spacer{
height:60px;} /* This height should be equal to or greater than the
footer. his ensures content is not cut off by your footer */
#footer{
position:fixed; /* keeps it from moving at all */
bottom:0; /* keeps it at the bottom of the screen */
width:100%; /* stretches to fill the width of the body tag */
height:30px; /* sets the height. should be equal to or less than the
footer_spacer height */
}
HTML: <div class = "footer_spacer"></div> <!--Nothing goes in here. This is just a spacer. --> <div id = "footer"> Enter Footer Content Here </div> <!--This is the actual footer. Use CSS to style to your needs -->
And that is it. The footer_spacer div creates a “buffer” below the rest of your page for the footer to rest in, thus eliminating any content from being cut off. If your webpage uses floats, read on. If not, then you should be able to copy and paste this into your exisiting web page with no problems. Tested in IE7, FF2, FF3 and Safari. Should work in IE6 as well.
If you use floats, as some of my pages do, you only have to make one small modification. The footer_spacer div may need to be increased to accomodate the position of your floats. Also, be sure to add a <div style = “clear:both;”></div> before the footer_spacer div to make sure it is positioned correctly. Any issues getting this up and running, feel free to e-mail me at dcostalis@gmail.com.
Hi,
thanks for the above code, this is really unbelievable that this issue with fixed footer/header can be achieved so easyly with only a few lines of CSS.
Unfortunately it doesn’t work in IE6. Could you please tell me how to get this up and running in this *** browser as well?
thanks a lot
Robert
Robert –
Thanks for the comment! One thing I’ve noticed is that IE6 will only let it work if you specify the DOCTYPE. (more on that at http://www.w3.org/QA/2002/04/valid-dtd-list.html).
In short, add this line to the VERY top of your page:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and it should work just fine in IE6. Thanks again!
Pingback: myspace div layout
The transitional doctype means IE is in quirks mode and this will introduce all sorts of other layout problems. If you care about how it looks in IE, this technique is not enough. (Yes, it should be just this simple, but in reality, it’s not.)
Andrew-
True. However, I haven’t noticed any way to make IE6 behave the way that it should… whether or not you specify transitional or strict, there will still be issues that need to be dealt with when attempting any sort of advanced layout.
Before reading the comments and after testing this fix I fell in love!! IE 7 looked great, Firefox looked great…. and of course IE 6 failed. I was so bummed!
I swear, IE6 is the cause of so much wasted time and effort in this world it’s not even funny.
Thank you for posting this fix I’m just bummed that IE6 sucks so bad.