Navigation

Making a Page footer STAY at the bottom

I have tried many, MANY ways over the years to reliably get a web page footer to stay at the bottom of the page. Most methods involve setting many div heights to 100%, which somehow makes it all magically happen.

I have found a much more reliable method.

  1. .footer{
  2.     position: absolute;
  3.     bottom: 0;
  4.     z-index: 5;
  5.     width: *your page width*
  6. }

I have only tried this method with fixed width pages, but it seems to work well. Better than any other method I used. Please note that the z-index is set to make sure the footer appears on top of other elements, and may need to be adjusted.

Posted January 18th, 2009 by Michael