float:left + float:left + clear:left springt zuweit zurück

[michaah]

Ich weiß nicht, ob sich das ohne code beschreiben läßt, aber ich versuche es:

Erstes div links, wird rechts von zweitem div umflossen, ok.

Zweites div beinhaltet img, img wird rechts von schrift
umflossen, auch ok.

Der weitere schriftfluß soll unterbrochen werden und unter dem img sich fortsetzen, was ich mittels <br clear:left> zu realiseren versuchte.

Das klappt so nicht: Der text wird unter das erste, ganz links stehende div gedrückt (obwohl er ja eigentlich zusammen mit dem img in ein eigens div "gesperrt" ist), nicht unter das zweite, rechts davon stehende. Der text springt also zuweit zurück in richtung links. Lässt sich das nicht verhindern? Muss ich in diesem fall eine tabelle verwenden?

[Bla]

Erstes div links, wird rechts von zweitem div umflossen, ok.

Zweites div beinhaltet img, img wird rechts von schrift
umflossen, auch ok.

Der weitere schriftfluß soll unterbrochen werden und unter dem img sich fortsetzen, was ich mittels <br clear:left> zu realiseren versuchte.

Das klappt so nicht: Der text wird unter das erste, ganz links stehende div gedrückt (obwohl er ja eigentlich zusammen mit dem img in ein eigens div "gesperrt" ist), nicht unter das zweite, rechts davon stehende. Der text springt also zuweit zurück in richtung links.

Schalte mal im zweiten <div> einen Rahmen ein (zB style="border:1px solid red"). Du wirst (bzw. solltest, standardkonformer Modus eingeschaltet, ordentlicher Browser) sehen, dass es nicht etwa rechts vom ersten float-<div> beginnt, sondern am linken Fensterrand. Das erste float-<div> überlappt also das zweite <div>, es steht nicht links daneben.
Deshalb springt der Text auch ganz nach links zurück. float wirkt sich nur auf die Zeilen aus, nicht auf das Blockelement.

Weiterhin besagt die Definition von clear, "the top border edge is below the bottom outer edge of *any* left-floating boxes that resulted from elements earlier in the source document." float und clear lassen sich also nicht stapeln, ein clear löscht alle vorigen floats.

Lässt sich das nicht verhindern?

Du könntest dem zweiten <div> einen Außenrand (margin-left) in Breite des ersten float-<div>s geben

[DeWitt]

Hallo,

Der text springt also zuweit zurück in richtung links. Lässt sich das nicht verhindern? Muss ich in diesem fall eine tabelle verwenden?

Wenn mich nicht alles täuscht, hatte vor drei Wochen erst dieselbe Frage. Suchfunktion? ;) Oder meintest du etwas anderes?

Ciao,
David //aka DeWitt

[DeWitt]

[...] die gleiche Frage [...]

[michaah]

[...] die gleiche Frage [...]

Vielen dank für deinen hinweis. Wenn ich mir das jedoch so durchlese (die folgende kritik richtet sich selbstverständlich NICHT an dich), bekomme ich nur noch wut über das was man unter css entwicklern als fortschritt sieht. Was mit "align" schlicht der anschaung entsprach wird mit flot, clear, clearboxen, overflow:hidden + IE hacks etc. zur doktorarbeit. Spaß am lernen empfindet dabei nur derjenige, der es als toll empfindet, mühsamst zu durchblicken, wie man anschauliche lösungen durch möglichst unanschauliche lösungen ersetz. Es ist gewissermaßen fachchinesisch nach CSS übersetzt.

Jetzt muß ich mir nur noch überlegen ob ich den strict doctype auf transitional ändere oder tabellen verwende. Vielleicht findet sich ja hier jemand, der meinen grundsätzlichen ärger teilt und für sich daraus die konsequenzen gezogen hat.