André Laugks: DIV's in DIV packen. Probleme mit äußerem DIV

SELF-Forum

DIV's in DIV packen. Probleme mit äußerem DIV

André Laugks Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!

ich möchte innerhalb eines div eine beliebige Anzahl von div's packen. Dennen gebe ich allen ein float:left. Leider macht mir der Mozilla ein Strich durch die Rechnung. Der IE macht es so, wie ich es möchte. Nun weiss ich nicht, wer es richtig macht. Die Höhe des äußeren div soll sich anhand der inneren div's anpassen.

Beispiel:
http://www.pb82.de/_extern/selfforum/2004_04_11/div.html

IE 6.0
<img src="http://www.pb82.de/_extern/selfforum/2004_04_11/ie.gif" border="0" alt="">

Mozilla 1.6
<img src="http://www.pb82.de/_extern/selfforum/2004_04_11/mozilla.gif" border="0" alt="">

MfG, André Laugks

--
L-Andre @ gmx.de
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. DIV's in DIV packen. Probleme mit äußerem DIV

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo!

    ich möchte innerhalb eines div eine beliebige Anzahl von div's packen. Dennen gebe ich allen ein float:left. Leider macht mir der Mozilla ein Strich durch die Rechnung. Der IE macht es so, wie ich es möchte. Nun weiss ich nicht, wer es richtig macht. Die Höhe des äußeren div soll sich anhand der inneren div's anpassen.

    Die Gecko Engine macht es richtig. Die Höhe des DIV richtet sich nach der Höhe, die benötigt wird, um alle Kind-Elemente des DIV, die sich im _normalen_ Elementfluss befinden, im DIV darzustellen. Float-Elemente befinden sich _nicht_ im normalen Elementfluss. In Dein umgebendes DIV muss als Element _nach_ den Float-Elementen ein Element mit clear:both;. Das kann gerne eine Hhe von 0 haben.

    <body>

    <div class="border1111" style="width:712px;">
                            <div class="border0111 floatleft" style="width:168px;"> </div>
                            <div class="border0111 floatleft" style="width:168px;"> </div>
                            <div class="border0111 floatleft" style="width:168px;"> </div>
                            <div class="border0111 floatleft" style="width:168px;"> </div>
                            <div class="border0111 floatleft" style="width:168px;"> </div>
                            <br style="clear:both;">
      </div>

    </body>

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. DIV's in DIV packen. Probleme mit äußerem DIV

    CarstenP Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo André,

    Boxen mit "float" liegen außerhalb des normalen Flusses. Dein umgebenes div hat also gar keinen Inhalt. Mozilla hat also recht mit seiner Darstellung. Schau Dir dazu auch das folgende Bildchen vom W3C an:

    <img src="http://www.w3.org/TR/CSS2/images/float2p.gif" border="0" alt="">

    Eine dreckige Lösung wäre, hinter Dein letztes floatendes div ein leeres div zu setzen und ihm ein clear:left; zu geben.
    Falls es eine saubere Lösung gibt: ich bin auch daran interessiert... ;-)

    Viele grüße
    Carsten

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln