This is one of the more mindboggling snippets of CSS you'll ever see. It's up there with techniques that keep two columns the same height without using Javascript or a <table> element.

I've implemented this before, but still wouldn't be able to produce it on the spot without Googling. This post encouraged me to take a deeper look.

This page goes in depth on how it works, but is still a bit confusing: http://code.google.com/p/cleanstickyfooter/

The craziest part is the #wrapper element, which uses a nifty hack to support old and new browsers. Old browsers don't work with css min-height, but they do allow the height property to expand. Moreover, old browsers will ignore an "important!" tag if the same property is addressed later in that selector.

It's a perfect storm of dumb luck that "min-height: 100%; height: auto important!; height: 100%;" actually manages to do what you want, for this exact scenario, in all browsers. That line looks pretty stupid to most modern css devs.

Here's an arguably cleaner approach that I believe will work for most modern browsers (I think after IE6, but could easily be mistaken). No need for the wrapper around all content, but you still need that darn "push" div. Actually now that I think about it, it might even work for older browsers if you add "height: auto important!; height: 100%;" to the body. Maybe someone can test? http://jsfiddle.net/A3BLm/1/