Hi,
ich habe mal wieder ein Problem:
Ich habe mehr als zwei div ineinander verschachtelt.

Div1 ist Mutterelemnt von div2 und div3.

Wenn die eingebettete Box(div2 und div3) einen Inhalt hat, der größer ist als der von div1, dann überlappt div2 div1. Im IE 7 wächst das "Mutterdiv" mit. Allerdings habe ich gelesen das dies nicht dem W3C-Standard entspricht. Im FF und in Opera wird jedenfalls nichts an div2 bzw div3 angepasst.

Ich habe auch schon versucht div2 und div3 zu clearen(clear:both;) hat aber auch nicht funktioniert.
Weiß jemand wie man das ändern kann?
Vielen dank im voraus
Leuchtturm


Moderiert von UGrohne: Topic aus Algorithmen, Optimierung und Assembler verschoben am Sa 29.12.2007 um 13:37

Normal ist es ja so, dass ein blankes div in eine eigene Zeile mit maximaler Breite geschrieben wird. Mich würde interessieren was du sonst noch so für Rahmenbedingungen hast. Also der Inhalt der divs und das verwendete css. Denn ich für meinen Teil kann dein Problem gerade nicht nachvollziehen.

Div das mitwachsen soll anhand des eingebetteten Div's.

Ist in der Mitte von div3 und div4(siehe unten)

Es gibt im Grunde genommen div3 zweimal. Einmal rechts(div4) und einmal links(div3) floatierend.


Verwendetes CSS: CSS2.1 glaube ich
Die Breite ist ja nicht das Problem. Die Höhe wächst ja nicht mit.
Ich habe jetzt noch mla ein Bild angehängt wie es im FF aussieht

Ah. Das letzte Bild hat mir die Klarheit gebracht. Du möchtest das falsche Verhalten des IEs auch auf den FireFox übertragen.

Das Problem hatte ich auf meiner Seite auch mal. Das passiert jedes mal dann, wenn du mit Float arbeitest und diese Element für die Gesamthöhe verantwortlich ist. Also wenn es geht würde ich die Floats weglassen. Sollte in deinem Falle ja eigentlich gehen, da die divs sowieso untereinander dargestellt werden. Also ist das float ja mehr oder weniger überflüssig. Bzw zerstört die Höhe.

Ich hatte es bei mir gelöst in dem ich dem "div1" eine fixe Höhe verpasst hatte.

Jup, entweder feste Höhe, oder ohne float. Das sorgt definitionsgemäß dafür, dass das div floatet (oh Wunder), und damit nicht mehr in die Höhenberechnung eingeht.

Ich hatte oft genug das Problem andersrum... dass das Div im IE größer wird, obwohl es das eigentlich gar nicht darf.

Danke für eure Antworten. Das Float weglassen geht leider schlecht, weil ich ein 3-Spalten-Layout habe und in an beiden rändern zwei Boxen untereinander gezeigt werden und in der mitte eine Box gezeigt wird, die aber größer ist als eine von den Randboxen.
siehe [url]www.orell.de[/url]
Wenn ich für die Seite eine fixe Größe festlege, wmüsste ich das ja immer ändern, was natürlich kein Hindernis wäre, aber umständlig ist.

Auf meiner Seite habe ich 2 Spalten und die linke Spalte hat float: left. Das div in der Mitte hat nichts dergleichen. Außer ein Margin welches breiter ist als die linke Spalte. Das mittlere div bekommt als Höhe aber auch nur das was tatsächlich an Inhalt da ist. Das floating Element wird von der Höhe ignoriert. Beide divs (left und main) stecken in einem anderen div und das div unterhalb dieses hat ein clear: left was dafür sorgt, dass das darunter auch immer unter beiden dargestellt wird.

Auf folgender Seite kommt das zum Tragen. Am Besten mit dem Firebug Plugin für den Firefox mal anschauen. Da sieht man dann schon die Strukturen und das css.
www.dev-center.de/index.php?cat=tutorials

Als Workaround schlage ich folgendes vor:
Ein weiteres Element welches im DOM oberhalb im Quellcode aber unterhalb des besagten Divs liegt.
Dieses Element bekommt dann einfach den style "clear:both" und schon wird das div gestreckt.

Danke jetzt funktionierts. zwar nicht ganz wie gewollt, aber ne so schlimm