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

Question

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.

Update:

It's not working properly in Firefox. I'm seeing a strip of background color below the footer when there's not enough content on the page to push the footer all the way down to the bottom of the browser window. Unfortunately, this is the default state of the page.

Answer 1

If you want to get the sticky footer then use this:

• You just need a <div> tag with class="wrapper" for your content.
• Right before the closing </div> of the wrapper try placing the <div class="push"></div>.
• And right after the closing </div> tag of the wrapper try placing the <div class="footer"></div>.

Code is as follows:

* {

    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 */

}