Top margin & background color issue w/ floated div (firefox)

[liunx]

Basically, I have a simple:


header
left right
footer


design. I have floated "left" (#services) and put a left-margin on "right" (#picture). Everything works OK except that the background color on #picture does not go up to the header unless I put a padding on it or a border. See screen shots for example.

html:


<div id="pageHeader">
header
</div>

<div id="services">
<pre>
stuff
stuff
stuff
</pre>

</div>

<div id="picture">
<pre>
stuff
stuff
stuff
</pre>
</div>


<div id="affiliations">
clear
</div>




#pageHeader {
text-align: center;
background-color: green;
}

#services {
float: left;
width: 450px;
background-color: yellow;
margin: 0;
padding: 0;
}

#picture {
margin: 0;
padding: 0;
width: 275px;
margin-left: 450px;
background-color: pink;
/*Line below solves problem*/
/*border-top: solid 1px red;*/
}

#affiliations {
clear: both;
}


Thanks for any help you can give.Again, FF gets it right. IE gets it wrong. Google for floated divs are not supposed to stretch to fill the area and how to clear floats.