Wiredbyte A Place to Rant and Muse over all things Tech http://www.wiredbyte.com/node/154/atom/feed 2009-01-18T14:55:57-08:00 Making a Page footer STAY at the bottom http://www.wiredbyte.com/2009/jan/making-a-page-footer-stay-at-the-bottom 2009-01-18T14:55:23-08:00 2009-01-18T14:55:57-08:00 Michael 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.

]]> 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.

]]>