nicht angemeldet
ich will per CSS mittels float: und clear:, sowie der Angabe von margin: eine Überschrift links vom eigentlichen Text plazieren. Das sollte eigentlich kein Problem sein, wären da nicht diese Browser...
<img src="http://www.skop.net/self/float-clear.gif" border=0 alt="">
Die nächste H3-Überschrift sollte _unter_ dem vorigen Abschnitt stehen.
Opera macht's richtig, Mozilla dehnt die Klasse 'abschnitt' nicht aus und der IE spinnt gänzlich (Die H3's sind nicht sichtbar usw.) Gibt es irgendwelche Vorschläge? Nein, Tabellen gelten nicht als Lösung ;)
Die H3-Objekte gehören wegen dem float:left nicht zum Objekt (div.abschnitt), in dem sie stehen und wirken sich deshalb auch nicht auf dessen Höhe aus. Somit können sich Deine Abschnitte garnicht auf die Höhe der Überschriften ausdehnen.
Der kleine Unterschied, den ich hier zwischen Opera und Mozilla sehe, liegt IMHO einfach nur an der Höhe der Schrift. Das Opera die Abschnitthöhe ausdehnt, halte ich für eine "optische Täuschung".
Möchtest Du, daß die Abschnitte genauso hoch sind, wie die Überschriften, müsstest Du wahrscheinlich für die Abschnitte position:relative setzen. Damit ist der Container für die fliegenden Bauten der jeweilige Abschnitt, nicht das Browserfenster.
Ich bin davon abgesehen ja der Meinung, daß die Browser hier grundsätzlich etwas falsch machen und das sich derselbe Effekt auch mit display:block erreichen lassen müsste. Laut http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block sollte jedes Block-Element der Container für alle seine Kinder sein, und Elemente mit float sollten sich an ihrem Container ausrichten.
Merkwürdigerweise richten die sich aber alle grundsätzlich am Fenster aus. Habe ich da was falsch verstanden oder ist das tatsächlich ein Browserproblem?
Was Mozilla definitiv falsch macht: Er beachtet das clear:left der Abschnitte nicht, was dazu führt, daß die Überschriften übereinanderliegen. Schön zu sehen, wenn man die Schrift kräftig vergrößert. IMHO ein dringender Fall für http://bugzilla.mozilla.org.
Zum IE: Keine Ahnung. Der ist doof ;)
Gruß,
soenk.e