[domvaz]

Ich grübele seit einer Woche an einem Problem, das eigentlich doch ganz einfach sein sollte. Aber ich versteh's einfach nicht.

Lt. W3C sollte ein float:left dazu führen, dass content um eine solche Box herumfließt, zum anderen wird sie aus dem normal flow herausgehoben. Aber dann verstehe ich die folgenden Resultate nicht. Box 2 fließt eben nicht um Box 1 herum, obwohl genug Platz wäre, sondern die height-Eigenschaft verändert sich scheinbar und ansonsten bleibt die Box 2 an ihrem Platz kleben!

compatMode ist übrigens CSS1Compat, also kein Quirksmodus.

Screenshot 1 zeigt 2 Boxen im normal flow vertikal angeordnet innerhalb eines wrapper-DIV mit rotem Border.
Screenshot 2 zeigt das Ergebnis, wenn ich Box 1 auf float:left setze (in Chrome 8.0, FF 3.6 und Opera 10.6).
Screenshot 3 zeigt das Verhalten im IE6: genau so verstehe ich das formatting model des W3C.

- alles ok

- was soll das denn?

- so wäre es okay.

#wrapper {
	width: 500px;
	border: solid 2px red;
}
	
#box1 {
	float:left;
	border: 1px solid black;
	background-color: silver;
	width: 200px;
	opacity: 1;
}
#box2 {
	border: 1px solid black;
	background-color: yellow;
	width: 200px;
	opacity: 0.8;
}

<div id="wrapper">
	<div id="box1">Box 1</div>
	<div id="box2">Box 2</div>
</div>

Der IE6 reagiert doch genau so, wie das W3C das beschreibt, oder? Box 1 verändert natürlich hier nicht ihre Position, weil sie schon am linken oberen Rand der containing box sitzt, aber die Box 2 müsste doch rechts von ihr zu stehen kommen. Aber alle außer IE zeigen das Resultat des mittleren Screenshots. Warum denn????

Gruß
Dominique

[fricca]

Dein Verständnis von Float ist leider ebenso falsch, wie das des IE6 (der Auslöser der Fehldarstellung ist hasLayout.)

Der Inhalt (der Text) eines nachfolgenden, normal fließenden Elements weicht einem Float aus -- nicht die Box des Elements.
In deinem Fall kann der Inhalt nicht ausweichen, weil du die nachfolgende Box in der Breite beschränkst.
Die Box des nachfolgenden Elements verhält sich, als wäre das Float gar nicht da. Sie reicht bis an den linken und an den oberen Rand.

Wenn du beide Boxen nebeneinander haben willst brauchen beide Elemente Float.

Grundlagen zu Float findest du unter FAQ Punkt 2.
Weitere Lektüre für Grundlagen: Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Bitte poste immer vollständigen Code, keine Fragmente.

[domvaz]

Danke für die schnelle Antwort.

Also wird nur die anonymous inline box verschoben? Oder die ganze line box? Naja, werde ich mal testen. Ich glaube aber nicht, dass ich das bei Müller überlesen habe.

Wenn der IE6 das falsch macht, dann macht er es vom Designerstandpunkt aus allerdings 100%ig richtig. Da haben sich wohl die Techniker durchgesetzt. (Naja, wie immer.) Ich kann jetzt wenigstens nochmal neu ansetzen.

Danke schön.

[fricca]

Zitat von domvaz

Wenn der IE6 das falsch macht, dann macht er es vom Designerstandpunkt aus allerdings 100%ig richtig. Da haben sich wohl die Techniker durchgesetzt. (Naja, wie immer.)

Nein.
Beim Modell des IE ist ein Umfließen eines Floats gar nicht möglich (Das wollen deine Designer aber haben.)
Das bedeutet nämlich, dass der Inhalt nach dem Float wieder ganz nach links geht. Das ist aber nicht möglich, wenn die Box nicht bis dorthin geht.

Lies bitte den Grundlagenartikel unter FAQ Punkt 2 ("Float - die Theorie"). Dort wird mit genau diesem deinem Missverständnis begonnen.

edit: Und noch ein schneller Blick in Little Boxes: http://little-boxes.de/lb1/16.1.1-sc...h-floaten.html