CSS layout dilemma

Hello,

I'm hoping someone can help with a CSS layout problem that I keep running
into. I want to make a series of vertically stacked boxes of fixed width
but flexible length. Inside the box are two columns, again with fixed width
but flexible length.

I've even made a dopey diagram to help you visualize...
http://www.davesmey.com/example.jpg

Here is my CSS

#eventbox {width: 575px; background-color: #FFFFFF; border-width: 2px;
border-top-style: solid; clear: left;}
#infobox {width: 340px; float: left; background-color: #FFFFFF;
padding-left:10px; padding-right:10px; padding-top: 10px}
#photobox {width: 205px; float: right; background-color: #FFFFFF;
padding-right:10px;}

And each box is basically

<div id="eventbox">
<div id="infobox">
<!-- infobox content -->
</div>
<div id="photobox">
<!-- an image, a caption -->
</div>
</div>

Works with IE, but not completely with Firefox - the white background does
not fill in the blank spaces around infobox and photobox. I always end up
solving the problem by enclosing everything in a bigger box.

Why doesn't it work with Firefox? Am I doing it wrong or is Firefox wrong?

Thanks,
Dave Smey
Brooklyn, NY


.