brainshitting » Forcing footer to bottom of page with just CSS

October 16th, 2009 by Luis Alves

Forcing footer to bottom of page with just CSS

This is a brief tutorial to explain how you can force the footer to stay in the bottom of the page with just CSS.

I have tested it in Firefox Mac / PC, Safari Mac / PC, IE7 and IE8. Does not work for IE6 and bellow.

First – In your CSS you have to set the html and Body to 100%

html, body {
height: 100%;
}

Second – Wrap all the content of your website except the footer div in a div with the following code:

#wrapper {
height:auto !important;
margin:0 auto -50px; /*this value is the footer height)*/
min-height:100%;
}

Third – create the CSS of your footer

#footer {
height: 50px;
}

Place your div #footer after the wrapper and that’s it.