Firefox 2 float

This is the main part of a simplified html.
<div id=”container”>
<div id=”header”>
</div>
<div id=”content”>
whatever content i put
</div>
</div>

This is the css that affects the html.

#container
{
width: 710px;
margin: 0 auto;
height: 100%;
padding: 10px;
border: 1px solid #000000;
text-align: left;
}

#header
{
width: 710px;
height: 130px;
margin: 0;
padding: 0;
border: 1px solid #000000;
background-repeat: no-repeat;
background-image: url(ramblings.jpg);
}

#content
{
width: 567px;
height: 100%;
margin: 0;
padding: 0;
vertical-align: top;
float: right;
}

In IE, the “whatever content I put” fits inside the div named container surrounded by the black border.

In Firefox, the “whatever content I put” does not fit into the div, it floats out on top of it and runs outside.

I notice this only occurs when I apply the float to #content. Has any one else come across this and fixed this?