Alexandru Dinulescu's Thoughts

What does this do?

This makes your footer stick at the bottom of the page, even if you have little content on the page. This is useful, but of course there are some jQuery alternatives which will be posted in a similar post later on. It’s a very simple, clean, CSS based only solution that works in 90%+ of the cases. Also this works in IE6.

The other solution is 10 times simpler but does not work in Internet Explorer 6. More details below…

First Method

XHTML

The wrapper div must enclose the page content. And the push div must be the last line in the content area

The CSS

The only limitations are that you need to know exactly the footer height and the footer must have over 80px; it doesnt work with less than that, i dont know why, but thats the way it is

The wrapper CSS for min-height, height and height again is because of a bug in IE6 important declaration, and since every other browser supports the proper important declaration, basically every browser will have it’s height set as auto, while IE6 will be bugged into making sure it has the min-height solution implemented correctly. I dont know the inner workings but after testing this seems to work

Another thing to keep in mind is that the div.push height’s must be a bit bigger so you have to tweak the values to suit your design

Also another thing, dont use margin top on your wrapper since it will break this, and if it still breaks afterwards, just add paddings on the div.content

This is the only clean solution to get the footer to stick at the bottom of the page, using CSS only, there are also some jQuery alternatives i’ll look into and post here in a few days.

Second Method

The second method takes advantage of the position: fixed; in CSS 2.1 however this method only works in IE7+, because IE6 doesnt understand position: fixed; native, however we have a small trick to do position: fixed; in IE6 found here. You can combine them if you wish.

For all the other browsers, add to the element you wish positioned fixed the CSS, and then hack for IE6 if you wish to support that crappy browser.

Questions in comments. Will answer as they come.