Float problem in IE, second floated div causes a 'clear'?

I'm having problems with the following (example) code. What I'm trying to achieve is the following: div#id1 is a container div. This contains a div with an optional image and a div for body text. Div#id2 is similar. Div#id3 is a container div for the menu. It should be located to the topleft of #container. Now in case there is an image in #id1 the div#id3 will be pushed down. This works in FF, Chrome, etc. It works in IE too but only with div#id1, as soon as I add div#id2 it seems IE uses it to clear the div#id1.

<div id="container" style="background:red;width:800px;min-height:500px;margin:0 auto;">
<div id="id1">
    <div style="width:200px;float:left;"><!-- this div has optional content and therefore might or might not push the purple div down --></div>
    <div style="background:yellow;width:600px;float:right;开发者_如何学C">This is the top right div</div>
</div>
<div id="id2">
    <div style="background:green;width:600px;float:right;">This is the bottom right div</div>
</div>
<div id="id3">
    <div style="background:purple;width:200px;">This should be the top left div but is not the case in IE</div>
</div>

Try the code above in both FF and IE and you'll see the difference. IE messes up. Then remove div#id2 and it's contents and try again. Here IE shows things just fine.

Any clues as to how to fix this?

Cheers, Bartezz

The blank div seems to have a minimum height meant for containing text, which causes it to be pushed down -- in Fx empty divs are not shown at all, and don't save any space for content inside them, cause there isn't any. Try modifying the 2nd inside of #id1 and the div #id2's width to lower and you'll see that the purple div gets pushed up a line-height -- I'm guessing the widths cause them to get so close to each other, that IE (but not other browsers) doesn't know how to make room for it so it pushes it down.

Dunno if this fits with your ideas, but why don't you just have one left div, and one right div, and fit divs inside them?