[RESOLVED] Floats and clear in IE

[Carth]

I spent ages making a lovely layout using divs and CSS instead of tables. It worked fine in Firefox which I was testing with while I made it. When I was finished I tried it in Opera and IE. It looked exactly the same in Opera, but in IE everything had gone all over the place, and it's a mess.

A small example of what seems to cause the problems (I've used colours as content to make it easier to explain below):
<div style="float: left;">
<div style="float: left; clear: left;">Blue</div>
<div style="float: left;"> Green</div>

<div style="float: left; clear: left;">Yellow</div>
<div style="float: left;"> Orange</div>
</div>

What I want to happen is how it works in Firefox: the clear clears it so it goes onto the next line and start again with a new float so Blue and Green will have the same layout as Yellow and Orange only under it. But in IE Orange appears ABOVE Yellow and to the right of Green. My page appears all on the same line except for some clears which don't seem to alter the layout after them.

Is it a mistake I've made using clear incorrectly? Can you tell me how to get the effect I want without tables or absolute positioning?

[ryanbutler]

Try assigning a width to the whole layout (floats need a width anyway) and using a break tag to clear the top two floated DIV's.

<div style="width:760px;">

<div style="float: left; width:190px;">Blue</div>

<div style="float: left; width:190px;"> Green</div>

<br style="clear:left;">

<div style="float: left; width:190px;">Yellow</div>

<div style="float: left;" width:190px;"> Orange</div>

</div>

[Carth]

Thank you Ryan Butler it worked. :)