Easy CSS fixed footer

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.

Stumble it!

Post Info

This entry was posted on Sunday, December 9th, 2007 and is filed under css, development. It has 1,287 views

Tags:css, div, layout

Comments Feed. | Leave Comment | Leave Trackback.

Previous Post: Wordpress isn’t perfect, and so is my grammer »
Next Post: Windows Vista Service Pack 1 RC1 »

Most viewed posts