keep footers at the bottom of the page 

The HTML div structure

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That’s it, all the magic happens in the CSS.


html, body { margin:0; padding:0; height:100%; }

#container { min-height:100%; position:relative; }

#header { background:#ff0; padding:10px; }

#body { padding:10px; padding-bottom:60px;   /* Height of the footer */ }

#footer { position:absolute; bottom:0; width:100%; height:60px;   /* Height of the footer */
background:#6cf; }

And one simple CSS rule for IE 6 and IE 5.5:

#container { height:100%; }

via Get down! How to keep footers at the bottom of the page.