✔ DIV in DIV und Vergrößerung im FireFox

[modstyle]

Hi!

Wenn man in einem DIV ein anderes DIV platziert und dieses DIV dann mit Inhalten füllt, dann wird das erste div genauso groß (in fast allen Browsern). Kurz eine grobe Struktur um das zu erläutern:

<div id="rahmen">
<div id="innen"></div>
</div>

Also "rahmen" wird auf die Größe von "innen" gezogen, wenn "innen" durch seine Inhalte über die Größe hinausgeht. So sollte es auch sein.

Wenn man nun folgendes macht ...

<div id="rahmen">
<div id="innen_links"></div>
<div id="innen"></div>
</div>

... und "innen_links" mit "float: left;" versieht, damit beide nebeneinander stehen, dann wird im Firefox "rahmen" nur vergrößert, wenn die Inhalte von "innen" den Rahmen sprengen, nicht aber wenn die Inhalte von "innen_links" den Rahmen sprengen.
Im Internet Explorer 5.5/6 ist alles so wie ich mir das gedacht habe, habe aber bei meinen Nachforschungen herausgefunden, dass das eigentliche ein Bug ist, die DIV-Container sollen gar nicht raufskaliert werden.
Da ich aber den DIV "rahmen" unbedingt immer so hoch haben muss wie "innen" und/oder "innen_links", würde ich gernen diesen "Bug" im Firefox forcieren.

Hat vielleicht jemand eine Idee, wie ich das hinkriege? Danke für die Hilfe!

 

[Maik]

Bei floatenden Boxen muß anschliessend mit der clear-Eigenschaft wieder der normale Textfluss im Dokument hergestellt werden:

div.clear {
clear: left;
}

<div id="rahmen">
    <div id="innen_links"></div>
    <div id="innen"></div>

    <div class="clear"></div>
</div>

Dann dehnt auch der Firefox-Browser das übergeordnete Eltern-Element aus.

 

[modstyle]

Hi!

Danke für die Hilfe! Wieder was gelernt!

Werde den Beitrag mal als erledigt vermerken.