Below is the CSS code that makes your sticky footers actually stick to the bottom.
html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */ #footer {position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /*Opera Fix*/ body:before { content:""; height:100%; float:left; 0; margin-top:-32767px;/ }
And on your html page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others);
<!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]-->
You'll notice that the footer height is used three times. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.
The conditional statement is neccessary to allow IE8 to expand beyond the 100% height should the content be longer. The other hack is for browsers that dont understand min-height, in particular Opera. It uses a 100% height float to resize pages properly when adjusting the viewport (browser window) size. The -32767px margin is Opera's limit.