How do you get the footer to stay at the bottom of a Web page?

I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.

To get a sticky footer:

1. Have a <div> with class="wrapper" for your content.

2. Right before the closing </div> of the wrapper place the <div class="push"></div>.

3. Right after the closing </div> of the wrapper place the <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.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 */
}

<div class="wrapper">wrapper
    <div class="push">push</div>
</div>
<div class="footer">footer</div>