CSS Sticky Footer

Ryan Fait's Sticky Footer, updated for IE7 compatibility

This is one of my favorite layouts. It came from here originally: http://ryanfait.com/sticky-footer/

 

The footer sticks to the bottom as the page is resized. If the content gets big enough it will push the footer off the screen.

 

This particular example shows the footer split into two parts, both of which are nested in the "footer" area.

 

The original code had a workaround for IE6, but with the intro of IE7, that fix becomes a problem. To get IE7 working properly, I moved the "height:100%" into a conditional IE6 only style block. If you look in the header of this page, you will see the following:

 

<!--[if lt IE 7]>
<style type="text/css">
#wrapper {height: 100%;}
</style>
<![endif]-->