I use:
#footerbox {
height:125px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FF9966;
font: normal 13px verdana, sans-serif;
I would suggest setting the height to whatever you please, but I keep it bigger to have all of the info in it like legal stuff, contact info, etc. Then, for the copy right, I use
#copyright {
height:20px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font: normal 13px verdana, sans-serif;
border-top:2px solid #FF9966;
}
Hope this helps somewhat. You can also set the width to whatever you want, pixels or percent. It wouldn't be to hard to get it attached to the bottom, if that's what you want. To make the copyright overlap the larger footer, just use
.class{
clear:both;
}
at the top of your CSS, and then clear P tags in your HTML like so
<div id="copyright">
<p class="clear">© herp derp</p>
</div>