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

Sticky footer on google

Have a <div> with class="wrapper" contain everything. After the wrapper </div> place the push div, then the 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 */
  }

Answer 2

Try putting a container div (with overflow:auto) around the content and sidebar.

If that doesn't work, do you have any screenshots or example links where the footer isn't displayed properly?

Answer 3

One solution would be to set the min-height for the boxes. Unfortunately it seems that it's not well supported by IE (surprise).

Answer 4

This question has some nice answers relating to this question. I am partial to my own answer, as it will work for what you want (getting a footer to stick to the bottom) :)

Answer 5

Set the CSS for the #footer to:

position: absolute;
bottom: 0;

You will then need to add a padding or margin to the bottom of your #sidebar and #content to match the height of #footer or when they overlap, the #footer will cover them.

Also, if I remember correctly, IE6 has a problem with the "bottom:0" CSS. You might have to use a JS solution for IE6 (if you care about IE6 that is).

Answer 6

You could use position:absolute following to put the footer at the bottom of the page, but then make sure your 2 columns have the appropriate bottom-margin so that they never get occluded by the footer.

#footer {
    position:absolute;
    bottom:0px;
    width:100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Answer 7

I'll add to @Jimmy: You also need to have to declare absolute (or relative) positioning to the element that contains the footer. In your case, it's the body element.

Edit: I tested it on your page with firebug and it seemed to work very well...

Answer 8

You may want to look at this question for other suggestions also. The top answer posted may help, but of course it depends on the layout you are shooting for also.

Answer 9

I found this simple, short tutorial, Making Your Footer Stay Put With CSS, to work for me when I faced a similar problem with long vertical content overlapping my web pages' footer.

In addition, for my situation, I had to find and remove any unnecessarily large, fixed values defined for height style belonging to other elements in my pages.

Answer 10

The Compass style framework has a helper for this: http://wiki.github.com/chriseppstein/compass/compass-core-layout-module