footer that stays put at the bottom of the page

[autopost]

Hi, I have a footer that I need to stay put when I add more content. Here is the code that works in IE strangely enough but not Gecko based browsers such as Mozilla. Below is the HTML and the CSS. I just need the footer to stay stuck to the bottom of the content area no matter what.

Thank you for your help.


<div class ="absoluteBox">
<div class="contentarea">


</div>
<div class="legal"> footer stuff goes in here
</div>
</div>


.absoluteBox {
position: absolute;
height: 455px;
width: 694px;
top: 107px;
left: 107px;
background-color: #ffffe6;
padding-left: 2px;
}

.contentarea {
position: relative;
height: 455px;
width: 694px;
background-color: #ffffe6;
}

.legal {
position: absolute;
height: 38px;
width: 696px;
background-color: #ffcc00;
text-align: center;
bottom: 0;
} {Note the stuff I took out of play.

.contentarea {
xposition: relative;
xheight: 455px;
width: 694px;
background-color: #ffffe6;
}

.legal {
xposition: absolute;
height: 38px;
width: 696px;
background-color: #ffcc00;
text-align: center;
xbottom: 0;
}