IE and FF div width

[samh]

I imagine this question has been asked and answered a hundred times. If so, I would apreciate a link to another thread rather than a flame.

Essentially my question is: I have a 600px wide outer div, and two inner divs each with 290px + 10px margin. In ff, this displays as the left div, next to the right div. In IE, this shows up as left div and then right div on the right, but below.

It's as if IE thinks my inner divs are too wide for the outer container when the total inner div width including margins should be exactly the width of the outer container. I find I have to bring the total inner width down about 6px to get it to fit.

What I really don't get, is if I switch the inner divs margin to padding, it works ok in both browsers.

<div style="width:600px;height:50px;background-color:blue">
<div style=
"width:287px;
margin-left:5px;
margin-right:5px;
height:50px;
background-color:red;
float:left;">
290 + 10 margin
</div>
<div style=
"width:287px;
margin-left:5px;
margin-right:5px;
height:50px;
background-color:red;
float:left;">
290 + 10 margin
</div>
</div>

many thanks
SH

[Setek]

I've tested that on IE 6, FF 1.5.0.6 (Mac and Windows) and Safari, and all display both floats side by side?

What other code might you have, affecting this layout?

[AndersHolm]

Hey! Are you using explorer 5? Anyway, try this article:

[macworld.com...]