nicht angemeldet
Frage zu float und clear - Ich verstehs nicht
Hallo, hab folgendes HTML-Dokument mit Style (Border nur zur Veranschaulichung):
--
<head>
<style>
#box1 {float:left;border:1px solid red}
#box2 {border:1px solid green}
#box3 {clear:left;float:left;border:1px solid blue}
#box4 {float:left;border:1px solid yellow} /*if this box isn't floated, it is not on the same height as box3*/
</style>
<body>
<div id="box1">This Box is floated left. <br /> Lorem ipsum ... </div>
<div id="box2">Normal Text</div>
<div id="box3">Box3 with clear:left and float:left</div>
<div id="box4">another box</div>
</body>
--
ich will folgendes Layout haben:
Box1 Box2
Box3 Box4
Also Box1 und Box3 jeweils float:left, und dann rechts davon Box2 bzw. Box4.
Mit obigen Code funktionierts, wenn ich jedoch bei Box4 das float:left rausnehm, gehts nicht. Dann schiebt sich Box4 nach oben, OBWOHL ich vorher bei Box3 ja ein clear:left hab (Anzeige im Firefox und Opera, im Internet Explorer 6 ists aber so wie ich es erwarten würde). Ich versteh das nicht. Wenn ich Box4 auf float:left setzte, passt es aber (gleiche Höhe wie Box3). Ich verstehe das nicht.
Danke für eine Erklärung.
<head>
<style>
#box1 {float:left;border:1px solid red}
#box2 {border:1px solid green}
#box3 {clear:left;float:left;border:1px solid blue}
#box4 {float:left;border:1px solid yellow} /*if this box isn't floated, it is not on the same height as box3*/
</style>
<body>
<div id="box1">This Box is floated left. <br /> Lorem ipsum ... </div>
<div id="box2">Normal Text</div>
<div id="box3">Box3 with clear:left and float:left</div>
<div id="box4">another box</div>
</body>
--
ich will folgendes Layout haben:
Box1 Box2
Box3 Box4
Also Box1 und Box3 jeweils float:left, und dann rechts davon Box2 bzw. Box4.
Mit obigen Code funktionierts, wenn ich jedoch bei Box4 das float:left rausnehm, gehts nicht. Dann schiebt sich Box4 nach oben, OBWOHL ich vorher bei Box3 ja ein clear:left hab (Anzeige im Firefox und Opera, im Internet Explorer 6 ists aber so wie ich es erwarten würde). Ich versteh das nicht. Wenn ich Box4 auf float:left setzte, passt es aber (gleiche Höhe wie Box3). Ich verstehe das nicht.
Danke für eine Erklärung.
-
Ups, sorry für die Formatierung, hier nochmal:
Hallo, hab folgendes HTML-Dokument mit Style (Border nur zur Veranschaulichung):
..snip..
<head>
<style>#box1 {float:left;border:1px solid red}
#box2 {border:1px solid green}
#box3 {clear:left;float:left;border:1px solid blue}
#box4 {float:left;border:1px solid yellow} /*if this box isn't floated, it is not on the same height as box3*/</style>
<body>
<div id="box1">This Box is floated left. <br /> Lorem ipsum ... </div>
<div id="box2">Normal Text</div>
<div id="box3">Box3 with clear:left and float:left</div>
<div id="box4">another box</div>
</body>
..snip..ich will folgendes Layout haben:
Box1 Box2
Box3 Box4Also Box1 und Box3 jeweils float:left, und dann rechts davon Box2 bzw. Box4.
Mit obigen Code funktionierts, wenn ich jedoch bei Box4 das float:left rausnehm, gehts nicht. Dann schiebt sich Box4 nach oben, OBWOHL ich vorher bei Box3 ja ein clear:left hab (Anzeige im Firefox und Opera, im Internet Explorer 6 ists aber so wie ich es erwarten würde). Ich versteh das nicht. Wenn ich Box4 auf float:left setzte, passt es aber (gleiche Höhe wie Box3). Ich verstehe das nicht.
Danke für eine Erklärung.