Kevin: Floats bleiben an Unterkante des vorherigen Elements hängen?!

Beitrag lesen

Hallo liebe Leute,

bin schon seit einigen Jahren dabei und gerade im Umgang mit CSS sehr geübt. Was mir jetzt aber zum ersten mal (zumindest so richtig bewusst) auffällt:

Ich habe zwei Boxen unterschiedlicher Höhe (beide float:left). Diese passen in eine Zeile. Soweit so gut. Dazu kommt eine kleine Box (die nicht mehr in diese Zeile passt) die locker unter die erste, linke Box passen würde. Sie hängt aber auf der Höhe Unterkante des höheren Divs.

Hier mal ein Beispiel:
http://imageshack.us/photo/my-images/143/bildschirmfoto20110629u.png/

Wieso sitzt die blaue Box nicht unter der grünen?
Hier der Mini-Code dazu:

<div style="background:green;float:left; width:300px;height:100px;">  
nfsdnfkds  
</div>  
<div style="background:red;float:left; width:500px;height:200px;">  
nfsdnfkds2  
</div>  
<div style="background:blue;float:left; width:200px;">  
nfsdnfkds  
</div>

Ist mir so noch nie aufgefallen.
Gibt es eine Möglichkeit die blaue Box automatisch floatend unter die Grüne zu bekommen?

Grüße,
caom