<p>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. </p>

To get a sticky footer:
Have a
```
<div>
```
with
```
class="wrapper"
```
for your content.
Right
before
the closing
```
</div>
```
of the
```
wrapper
```
place the
```
<div class="push"></div>
```
.
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 */
}
```
```