8/6/2019 Helping Your Footer Stick to the Bottom of the Page with CSS

1/2

One problem I run into pretty frequently when coding a site in to XHTML and CSSis making my footer dock to the bottom of the screen. Its especially annoying ifyou have a page thats short on content and the footer, which happens to be a different color that the body background doesnt stay at the bottom of the browser window. I can hear you say, But why dont you just do a fixed position on it. Thats easy enough. True, but if you do that then its always at the bottom of the screen nomatter how tall the window is. So if I have a page with a lot of content that fo

oter shouldnt show up until the content is done. How do we fix this? Let me showyou. Heres what the problem looks like:

This tutorial assumes a few things: 1. That you know basic HTML formatting, and2. That you have a pretty good understanding of CSS.

So first we need to make sure that everything except the footer is inside a container div. So your code would look something like this:

Header

HomePage 1Page 2

Content Here.

Footer Here.

Now that youve got your basic HTML set up, lets head over to the CSS and see what

we need to do there to get it to work. First, we want to give the html and bodytags a height of 100%:

html, body {height: 100%;

}

Next, we need to set the container div to position:relative, min-height: 100% and negative margin the bottom the height of the footer. What? A fixed height footer you say? Yes, I havent quite figured out the best way to do it otherwise:

#container {

min-height: 100%;margin-bottom: -330px;position: relative;

}

Now, onto the footer. Make sure the height on the footer matches the height of the negative margin on the container and set the position to relative:

#footer {height: 330px;position: relative;

}

Whats that? Yes, I know it doesnt work yet. Theres still a bit of magic to be done.See it turns out we need a div to help separate the footer from the container.Were going to call it clearfooter. So jump back to your HTML and add the div clas

8/6/2019 Helping Your Footer Stick to the Bottom of the Page with CSS

2/2

s right inside the closing div of the container. Thats very important. Inside theclosing div:

Header

HomePage 1Page 2

Content Here.

Footer Here.

Head back over to your CSS file and add this to the clearfooter div. Notice theheight again:

.clearfooter {height: 330px;clear: both;

}

Alright! So for those of us using browsers that arent stupid, this should work great. But 80% of use that one browser that is stupid, our friend Internet Explorer 6. Thankfully, its a pretty simple fix. I know, how often does that happen? First of all, you should know that IE7 should work fine with what weve done up to this point. So all we need is an IE6 specific hack. In your header where youre calling your external stylesheet put this:

This is a conditional statement for IE6 so it will load the CSS file only in that browser. In the CSS file, all you have to put is:

#container {height: 100%;

}

So there you have it! This works in IE 6 and 7, Firefox and Safari 2 and 3. I hope youve found this a useful tool in your CSS arsenal. If you know a better way,please let us know in the comments!