A Bulletproof Sticky Footer, Woohoo!

Footers on web pages are a great place to chuck copyright information, contact links, and quick navigational stuff. Visitors are trained to look to the bottom of pages to find these types of things, so why not help them out? One problem is that on pages that are a bit vertically challenged, the footer might end up in the middle of the page instead of down at the bottom of the browser window where it should be.

Shouldn't there be some kind of way to get a footer DIV to just sit at the bottom of the browser window no matter the size of the window? Yes, there should be, there is no obvious solution and has been an issue plaguing CSS kind for too long.

A solution has been found! Ryan Fait has coded a beautifully simple way to do this (with valid code!) and has generously shared the technique here. It works in all major browsers (IE, FireFox, Safari, and Opera) and is completely free to use at your will. Thanks Ryan!

Ryan’s solution is pretty cool.
But it breaks in ways that can’t be fixed if you are using set height on elements.
So, it’s pretty useless if you are setting the heights of content-containing divs.
I’ve used it a few times, but I’m wary of it.