Felix Riesterer: float Problem

Beitrag lesen

Lieber Manuel,

<div id="content">
<div id="content2">
   <ul>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>
</div>

lasse ich die li´s floaten werden die zwei übergeordneten div´s bei Opera und Firefox nicht weitergeführt (die Liste erscheint also außerhalb der divs).

Ich hatte gerade selbst dieses Phänomen beseitigen müssen. Der Hintergrund ist der: Da in Deinem <ul> alle Elemente (<li>s) gefloatet sind, bleibt da nix ungefloatetes, was dem Element eine benötigte Höhe oder Breite verleiht. Folglich muss das übergeordnete <div> ("content2") auch keine Höhe bzw. Breite haben, da ja nichts "in ihm steckt". Das, was da vermeintlich in ihm steckt, ist ja per float aus dem Fluss genommen. Selbiges gilt dann logischerweise auch für "content".

Lösung: Wenn content2 "wieder sichtbar" werden soll, dann musst Du ihm noch ein weiteres Element spendieren, dessen Anzeige per clear die vorherigen floats "abschließt". Dadurch bekommt content2 tatsächlich Bedarf an einer Höhe und Breite, da in ihm jetzt was "richtiges" steckt. Das könnte z.B. ein extra <div> in dieser Form sein: <div style="clear:both;"></div>*

Wenn content2 dann hoch und breit ist, dann ist auch "content" ausgefüllt und sichtbar.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

* vielleicht möchtest Du das clear:both in eine Klassendefinition setzen und das div dann nur mit einem Klassenattribut (eventuell mehrfach) auf Deiner Seite einsetzen... Es muss auch nicht "both" sein. Zu clear gibt es ja auch clear:right oder clear:left. Such Dir das Passende aus!