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.