nicht angemeldet
Floating DIVs in DIV
Hallo!
Wenn ich zwei DIVs innerhalb eines anderen DIVs z.B. per float:left nebeneinander ausrichte, dann scheint das umgebene DIV diese nicht mehr zu umschließen. Sowohl beim IE6 und dem aktuellen Mozilla. Ich schätze mal, dann wird das so richtig sein. Aber wieso? Ist das logisch?
Und weiß jemand, wie man das umgehen kann?
z.B.:
<div style="border : 1px solid black;">
<div style="border : 1px solid red; float : left;">blabla bla blu blobli bla</div>
<div style="border : 1px solid green; float : left;">laber sülz quatsch tratsch bla</div>
</div>
Gruß,
Dennis
-
Wenn ich zwei DIVs innerhalb eines anderen DIVs z.B. per float:left nebeneinander ausrichte, dann scheint das umgebene DIV diese nicht mehr zu umschließen. Sowohl beim IE6 und dem aktuellen Mozilla. Ich schätze mal, dann wird das so richtig sein. Aber wieso? Ist das logisch?
Unter 10.6 "Computing height and margins", Absatz 3, "Block-level, non-replaced elements in normal flow, and floating, non-replaced elements" heißt es dazu in der CSS2-Empfehlung vom W3C:
Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).
Elemente, bei denen float gesetzt ist, gehen also nicht in die Kalkulation der Höhe ihrer Elternelemente mit ein.
Und weiß jemand, wie man das umgehen kann?
Möchtest du, das dein Text unter den fliegenden Bauten weitergeht, kannst du für das nachfolgende Element das clear-Attribut benutzen.
Eine Möglichkeit, die Höhe des Elternelements dem der float-Elemente anzupassen, scheint es nicht zu geben.Gruß,
soenk.e-
Vielen Dank Soenke!
Möchtest du, das dein Text unter den fliegenden Bauten weitergeht, kannst du für das nachfolgende Element das clear-Attribut benutzen.
Das scheint leider selten (nie?) zu funktionieren.
Eine Möglichkeit, die Höhe des Elternelements dem der float-Elemente anzupassen, scheint es nicht zu geben.
Das ist irgendwie schade. ;-(
Gruß,
Dennis-
Vielen Dank Soenke!
Möchtest du, das dein Text unter den fliegenden Bauten weitergeht, kannst du für das nachfolgende Element das clear-Attribut benutzen.
Das scheint leider selten (nie?) zu funktionieren.
Nanu, damit hatte ich bis jetzt noch nie Probleme. Also in deinem Beispiel funktioniert es jedenfalls ganz wundbar:
<div style="border:1px solid black">
<div style="border:1px solid red;float:left;">blabla bla blu blobli bla</div>
<div style="border:1px solid green;float:left;">laber sülz quatsch tratsch bla</div>
</div>
<div style="clear:both">Mehr Text!</div>Gruß,
soenk.e-
Nanu, damit hatte ich bis jetzt noch nie Probleme. Also in deinem Beispiel funktioniert es jedenfalls ganz wundbar:
Öhm, du hast natürlich recht.
Es ist aber wirklich schade, dass das äußere DIV die inneren nicht umfließt. Na ja.
Gruß,
Dennis
-
-
-