nicht angemeldet
Problem mit verschachtelten DIVs und FLOAT
Hallo...
Vielleicht wißt ihr ja weiter. Um euch nicht mit seitenlangen Quelltext zu Quälen, schildere ich nur das Prinzip des Problems... also:
In einem übergeordneten DIV sollen zwei weitere DIVs eingebettet sein, und zwar so, daß der erste eingebettete DIV links und der zweite rechts im übergeordneten DIV liegt. Also dachte ich zunächst an folgende Struktur:
<div style="width:400px; height:400px; border:1px solid #000">
<div style="float:left; width:100px; height:50px; border:1px solid #000">
links
</div>
<div style="float:right; width:50px; height:200px; border:1px solid #000">
rechts
</div>
</div>
Das klappt auch wunderbar beim IE6, NS6.2, Opera6 und Mozilla1. Jetzt ist es für mich jedoch notwendig, eine absolute oder relative Höhenangabe im übergeordneten DIV wegzulassen, weil sich die Höhe des übergeordneten DIV an der Höhe des höchsten, eingebetteten DIV orientieren soll. Also fliegt "height:400px" raus.
Jetzt kommt nur noch der IE damit klar, die anderen Browser geben den übergeordneten DIV mit einer Höhe von Null wieder.
Sehr Erstaunliches passiert hingegen, wenn man nun noch die beiden "floats" wegnimmt: Jetzt stellen alle Browser den übergeordneten DIV wieder korrekt dar, aber die eingebetteten DIVs liegen natürlich nicht mehr nebeneinander... es ist also so, als wenn durch das "float" bei den nicht IE-Browsern quasi die Verschachtelungsordnung gesprengt wird. Mmh... soll das so laut w3c?
Wie kann ich das Problem lösen? Ach eines noch: Die Lösung mit "width:100%" in bezug auf einen weiteren übergeordneten DIV kommt aus diversen Gründen auch nicht in Frage.
Danke für die Mühe :o)
-
In einem übergeordneten DIV sollen zwei weitere DIVs eingebettet sein, und zwar so, daß der erste eingebettete DIV links und der zweite rechts im übergeordneten DIV liegt. Also dachte ich zunächst an folgende Struktur:
Das klappt auch wunderbar beim IE6, NS6.2, Opera6 und Mozilla1. Jetzt ist es für mich jedoch notwendig, eine absolute oder relative Höhenangabe im übergeordneten DIV wegzulassen, weil sich die Höhe des übergeordneten DIV an der Höhe des höchsten, eingebetteten DIV orientieren soll. Also fliegt "height:400px" raus.
Jetzt kommt nur noch der IE damit klar, die anderen Browser geben den übergeordneten DIV mit einer Höhe von Null wieder.Nein, der IE kommt damit nicht klar, er macht es nämlich falsch.
Elemente mit gesetztem float-Attribut fallen aus dem normalen Elementfluss vollständig heraus. Schau dazu mal in den CSS-Standard zur Definition von float unter http://www.w3.org/TR/REC-CSS2/visuren.html#floats, dort sind auch Beispiele, die zeigen, warum das so sein soll.
Aber insbesondere solltest Du auch in den Abschnitt "Computing heights and margins" unter http://www.w3.org/TR/REC-CSS2/visudet.html#q17 schauen, dort heißt es:
Only children in the normal flow are taken into account (i.e.,
floating boxes and absolutely positioned boxes are ignored [..]Daß der IE6 es falsch macht, wundert mich eigentlich ein wenig, hast Du eventuell statt des Standardmodus den Ich-würg-die-Seite-mal-so-hin-Modus aktiviert? Unter http://www.hut.fi/~hsivonen/doctype.html findest Du eine Liste mit den passenden DOCTYPE-Angaben?
Um das übergeordnete <div> auf die richtige Höhe zu bringen, kannst Du Dich eines einfachen Tricks bedienen.
Setze an's Ende dieses <div>s ein Element, bei dem clear:both gesetzt ist. Da dieses Element wegen der clear-Angabe unter alle fliegenden Bauten wandern muß, zwingt es auch automatisch das übergeordnete <div> auf die korrekte Höhe.Gruß,
soenk.e-
Hallo soenk.e
Daß der IE6 es falsch macht, wundert mich eigentlich ein wenig, hast Du eventuell statt des Standardmodus den Ich-würg-die-Seite-mal-so-hin-Modus aktiviert?
Nein, striktes, validiertes 4.01
Um das übergeordnete <div> auf die richtige Höhe zu bringen, kannst Du Dich eines einfachen Tricks bedienen.
Setze an's Ende dieses <div>s ein Element, bei dem clear:both gesetzt ist. Da dieses Element wegen der clear-Angabe unter alle fliegenden Bauten wandern muß, zwingt es auch automatisch das übergeordnete <div> auf die korrekte Höhe.Jau, das hilft mir weiter, besten Dank. Übrigens: Wenn man den übergeordneten DIV mit "position:relative" formatiert, klappt es bei allen außer Opera... seltsam, aber anscheinend habe ich die ganze Thematik mit den Positionierten DIVs noch nicht so ganz verstanden.
Naja, ich komm mit Deiner Lösung jetzt wenigstens weiter :o)
-