Orlando: Float nach nicht-floatendem Element auf gleicher Höhe

Beitrag lesen

Hallo Yusuf,

#main {width:900px;height:300px;background-color:#b0b0f0;margin:auto}

#md {width:800px;height:250px;background-color:#f0b0f0;margin:auto}
#d1 {float:left;width:80px;height:200px;background-color:#f0b0b0;text-align:left}
#d2 {width:500px;height:200px;background-color:#b0f0b0;margin:auto;text-align:left}
#d3 {float:right;width:80px;height:200px;background-color:#f0f0b0;text-align:left}

  

> ~~~html

<div id="main">  

>   <div id="md">  
>     <div id="d1">LEFT</div>  
>     <div id="d2">MIDDLE</div>  
>     <div id="d3">RIGHT</div>  
>   </div>  
> </div>

Das rechte kleine DIV steht nicht richtig.

Doch, tut es.

Was ist falsch?

Die Umsetzung. ;-) Die Oberkante des rechten gefloateten Elements darf nicht nicht höher stehen als die Unterkante des zuvor nicht gefloateten Elements, weil … http://www.w3.org/TR/CSS21/visuren.html#propdef-float … ich mich um die genaue Erklärung drücke. Floats sind im wahrsten Sinne des Wortes unerklärlich.

#d1 {float:left;width:80px;height:200px;background-color:#f0b0b0;text-align:left}  
#d2 {width:500px;height:200px;background-color:#b0f0b0;margin:0 70px;text-align:left;float:left;}  
#d3 {float:left;width:80px;height:200px;background-color:#f0f0b0;text-align:left}

Grüße
 Roland