 <p>Try this</p> <p><strong>CSS</strong></p> <pre><code>html, body { margin:0; padding:0; height:100%; } #wrapper{ min-height:100%; position:relative; } #header { background:#00ff0f; padding:30px; } #main{ padding:10px; padding-bottom:45px; /* Height+padding(top and botton) of the footer */ text-align:justify; height:100%; } #footer { position:absolute; bottom:0; width:100%; height:15px; /* Height of the footer */ background:#00ff0f; padding:10px 0; /*paddingtop+bottom 20*/ } </code></pre> <p><strong>​HTML</strong></p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="main"&gt; Some Content Here... &lt;/div&gt; &lt;div id="footer"&gt;Footer&lt;/div&gt; &lt;/div&gt;​ </code></pre> <p><a href="http://jsfiddle.net/FPCWD/7/" rel="nofollow"><strong>DEMO</strong></a>.</p>