CSS

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { 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; } /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

HTML

<div id="wrap">
	<div id="main" class="clearfix">
	</div>
</div>
<div id="footer">
</div>