Putting footer on the bottom of the page <p>I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="header-wrapper"&gt; ... &lt;/div&gt; &lt;!--header-wrapper--&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="body-wrapper"&gt; &lt;div class="row960"&gt; &lt;div class="menu"&gt;...&lt;/div&gt; &lt;div class="content"&gt;...&lt;/div&gt; &lt;/div&gt; &lt;!--row960--&gt; &lt;/div&gt; &lt;!--body-wrapper--&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="footer-wrapper" class="gray"&gt; &lt;/div&gt; &lt;!--footer-wrapper--&gt; &lt;/div&gt; &lt;!--wrapper--&gt; </code></pre> <p>and css:</p> <pre><code>.clear{ clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:24px; margin:0px } html, body{ margin: 0; padding: 0; height: 100%; width: 100%; } body{ background-color: #000000; color: #FFFFFF; font-size: 14px; } #wrapper{ min-height: 100%; position: relative; } #header-wrapper{ height: 100px; } #body-wrapper{ padding-bottom: 50px; } #footer-wrapper{ position: absolute; bottom: 0; width: 100%; height: 50px; } .row960{ width: 960px; margin: auto; overflow: auto; } #menu{ width: 200px; float: left; } .content{ width: 740px; margin-left: 20px; float: right; } </code></pre> <p>The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and <em>body-wrapper</em> has right height, but <em>row960</em> has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?</p> <p>You can see my page on <a href="http://www.domenblenkus.com/fiap/notice.php" rel="nofollow">http://www.domenblenkus.com/fiap/notice.php</a></p> <p>Thanks for your help!</p> <p>EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of <em>row960</em> is not right.</p>