Footer Problem

Hi,

This is what my footer currently looks like in a design im working on:
http://www.contemporarymultimedia.com/design1.htm

As you can see its all messed up. This is the CSS for the footer the main problem is the float right footer class:

#footer {
clear: left;
display: block;
height: 39px;
margin: 0px;
line-height: 39px;
font-size: .75em;
color: #C5ACAB;
padding-left: 20px;
background-color: #8A5857;
}
 
.float-right-footer {
text-align: right;
float: right;
height: 39px;
margin: 0px;
}

Im using the float-right-footer so i can add some text on the right hand side of the footer.

Im not really sure what im doing wrong. Here is the XHTML:

 
<div id="footer">
<p>Copyright &copy; 2005 - Rocha Rocha. All rights reserved. </p>
<p class="float-right-footer">Valid XHTML / CSS</p>
</div>

Any suggestions?

Thanks