html - Putting footer on the bottom of the page -

i put footer on bottom of page (or bottom of screen, if page shorter screen). using code:

<div id="wrapper">     <div id="header-wrapper">     ...     </div> <!--header-wrapper-->      <div class="clear"></div>      <div id="body-wrapper">         <div class="row960">              <div class="menu">...</div>              <div class="content">...</div>          </div> <!--row960-->     </div> <!--body-wrapper-->      <div class="clear"></div>      <div id="footer-wrapper" class="gray">      </div> <!--footer-wrapper-->  </div> <!--wrapper--> 

and css:

.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; } 

the problem footer on bottom of screen if page longer screen (it covers text). i've checked firebug , body-wrapper has right height, row960 has height of screen instead of height of page. can't figure out how fix it. 1 have idea do?

you can see page on http://www.domenblenkus.com/fiap/notice.php

thanks help!

edit: don't know if emphasized enough, point out main problem height of row960 not right.

hmmm, think have solution fits requirements stated. there other ways though, can keep looking around if don't agree method. (also, when looked on site appeared #wrappper element sibling of #footer-wrapper, , not parent.)

so, html (structure copied site):

<div id="wrappper">     <div id="header-wrapper" class="gray">     <div class="clear"></div>     <div id="body-wrapper"></div>     <div class="clear"></div>     <div class="spacer"></div> </div> <div id="footer-wrapper" class="gray"></div> 

note addition of .spacer element @ bottom of #wrappper, it's required approach of "sticky footer".

now, css you'll need add (add current definitions if have them):

body, html{     height: 100%; } #wrappper{     min-height: 100%;     margin-bottom: -50px;     height: auto; } .spacer{     height: 50px; } 

if you're wondering why chose 50px height, it's because that's height of footer element, #footer-wrapper.

anyways, tested in firebug console, i'm not sure how behave in live environment, i'm give want. if isn't looking for, let me know , i'll happy further!