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