Gäller Firefox.

Problemet är att den yttre div-en inte följer med i höjd då jag lägger på en float på det inre (för att få dom att ligga som kolumner)

--Kodexempel--

Här följer den yttre(röda) med i höjd. Men den gröna och blåa ligger under varandra
<code>
<div style="background:#FF0000;width:200px;">
<div style="width:140px;background:#00FF00;"><br><br><br></diV>
<div style="width:50px;background:#0000FF;"><br><br><br></diV>
</div>
</code>


Här ligger den gröna och den blåa rätt. Men den röda syns inte till (som borde, enligt mina önskemål, sticka ut 10 pixlar till höger om den blåa).
<code>
<div style="background:#FF0000;width:200px;">
<div style="float:left;width:140px;background:#00FF00;"><br><br><br></diV>
<div style="float:left;width:50px;background:#0000FF;"><br><br><br></diV>
</div>
</code>


Finns det en lätt lösning på det?