Step 1: Markup
<html> <head><!-- header includes... --></head> <body> <div class="wrap"> <div class="header"></div> <div class="middle"></div> </div> <div class="footer"> <!-- footer contents ... --> </div> </body> </html>
Step 2: CSS
html,body{height:100%;}
.wrap {min-height: 100%;height: auto !important;height: 100%;}
.middle {overflow:auto;padding-bottom: 50px;}
.footer{position: relative;margin-top: -50px;height: 50px;clear:both;}
where the negative margin of footer and padding-bottom of middle should be equal to footer height.
