Ingo Turski: CSS-Layout mit DIV -> Browser-Probleme

Beitrag lesen

Hi,

Die 'float'-Geschichte funktioniert auch nur zum Teil, zumindest, wenn man nicht zig Ausnahmeregeln schaffen möchte, und das habe ich eigentlich nicht vor, da sonst keiner mehr durchblickt.

oder wenn man sich nicht 100%ig damit auskennt. ;-)

hier mal als Beispiel:

http://www.vcu.de.vu

bitte http://www.noack.gmxhome.de/div/.

Fall 1: Firefox stellt korrekter Weise das _dritte_ Element (Deine angeblich letzte Box) über Box 1 dar und bricht den Text mangels ausreichender Breite um. Das ist nur zu verstehen, wenn man wirklich die Grundlagen von float kennt. Schau Dir mal dieses einfache Beispiel an oder vergrößere in Deinem Beispiel die Breite der "letzten Box" bzw. setze sie auch im Quelltext an die letzte Position.

Fall 2: derselbe Fehler von Dir, nur daß Du ihn jetzt etwas besser siehst, da die Box sich in der Höhe dem Inhalt anpassen darf. Der grüne border wird oberhalb von Box 1 überdeckt.

Fall 3: ohne width nimmt die "letzte Box" die komplette Fensterbreite ein, so daß der Inhalt neben den _zuvor_ notierten floatenden Boxen paßt. Daß sich der IE nicht an Deine height-Angabe hält, ist ein Fehler.

Fall 4: normales float-Verhalten. Ich sehe hier keine Probleme.

Fall 5: standardkonforme Broweser stellen den Rahmen der umfassenden Box sehr wohl dar - nur halt in der korrekten Höhe, die Du aber nicht erwartet hast. Du kannst ihn auch an den dickeren Linien sehen oder gib diesem Element mal eine Hintergrundfarbe. Der IE macht hier den bekannten Fehler, daß er die Box ausdehnt, obwohl die "letzten Boxen" über float aus dem Elementenfluß genommen sind.

freundliche Grüße
Ingo