Positioning Footer always at base

[YourDirector]

Hi all, got a bit of an issue with getting my footer to stick to the base of the page.

I have a Fixed Position header at the top of the page remaining visible at all times but then want the wrapper and main conent divs to expand with their contents and a 100%width footer at the base of that.

This is where I currently am:

Style:

body{
    height:100%;
    margin:0px 0px 0px 0px;
    }

#headerdiv{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:125px;
  z-index:20000000;
}

#headerholder{
    position:fixed;
    width:100%;
    height:125px;
    z-index:30000000;
    text-align:center;    
    }
    


#wrapper{
   position:absolute;
   margin-top:125px;
   width:100%;
height:100%
   text-align:center;
   min-height:100%;
 }

#maincontent{
    position:relative;
    margin:0 auto;
    clear:both;
    width:870px;
    text-align:left;
min-height:100%;
    height:auto !important;
    height:100%;
 }

   #footerbar{
    position:relative;
   margin-top:-160px;
    width:100%;
    margin-top:-160px;
    height:160px;
}

Body:

<div id="headerdiv"> <!-- This is a semi-transparent background for the header -->
 &nbsp;
 </div>
 <div id="headerholder"><!-- This contains the headers contents -->
 HEADER CONTENT
</div>
 <div id="wrapper">

 <div id="maincontent">
PAGE CONTENT HERE
</div>
<div id="footerbar">
<div id="footercontent">
FOOTER CONTENT HERE
</div>
</div></div>

I just can't get this to work though. Could anyone point out where I may be going wrong? Thanks YD

[sunfighter]

It's called sticky footer, google it.