Sticky Footer - Web Design

I was working on the html design of a new website that needed to have the footer stick to the bottom of the page.  After much searching I found one solution for a css sticky footer here that I would not recommend.  This used the following css trick:

Warning Improper CSS...

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ }
.footer, .push {
	height: 142px; /* .push must be the same height as .footer */}

... 

Well it turns out this hack doesn't work quite as well as described. For starters the "height: auto !important;" caused the footer to get stuck in inappropriate places in IE7. However, thanks to the wonderful forums over at SitePoint, I was able to find a proper solution that was easier to implement.  I have also tested this CSS in IE7 and FF and both render it flawlessly.

The proper css and html and be find here. Here is the better CSS from the proper solution:

Proper CSS...

*{margin:0;padding:0}
html,body{height:100%}
body{position:absolute;width:100%}/*opera 9.5 fix*/

#outer{
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height*/}

* html #outer{height:100%}

#header{
    border-top:40px solid #fff;/* soak up negative margin*/
    background:red;}

#footer{
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin and header soak up*/}...

Links

http://www.pmob.co.uk/temp/sticky-footer.htm - The HTML and CSS example of a proper sticky footer.

http://www.pmob.co.uk/#nolink -The rest of Paul's blog contains many helpful CSS examples, including the HTML and CSS for the Sticky Footer example above.

SitePoint CSS Forums: Sticky Footer Div - The answer to my question on sitepoint.