float Problem

[Manuel]

Moin,

folgender Code:

<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). Lasse ich das float weg funktioniert es.

Woran liegt das?

Bin für jeden Tip dankbar

[MudGuard]

Hi,

<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). Lasse ich das float weg funktioniert es.

Works as designed.
Wenn Du Elemente per float aus dem Fluß nimmst, beeinflussen sie die Höhe des Elternelements nur dann, wenn dieses selbst auch float gesetzt hat.

cu,
Andreas

[manuel]

Wenn Du Elemente per float aus dem Fluß nimmst, beeinflussen sie die Höhe des Elternelements nur dann, wenn dieses selbst auch float gesetzt hat.

danke, werd ich mal testen

[Felix Riesterer]

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!