4 Ebenen in einer Ebene nebeneinander

  • 4 Ebenen in einer Ebene nebeneinander

    Ich hab folgendes problem. In einer vorhandenen Ebene möchte ich 4 Ebenen unterbringen. Eigentlich sollte das kein problem sein. Nur ist es so: Wenn ich bei den Vier Ebenen die Anweisung float einbrige funktioniert das auch fast schon. Aber die übergeordete Ebene umschließt nicht die 4 Ebenen. Warum nicht. Hab ich was mit dem Textumfluss falsch gemacht(float)?


    Quellcode

    1. <div style="background:#FFF9F9; margin-left:153px; border:thin #000000 solid;">
    2. <div style="width:25%; float:left;">&nbsp;ddd</div>
    3. <div style="width:25%; float:left; ">&nbsp;</div>
    4. <div style="width:25%; float:left; ">&nbsp;</div>
    5. <div style="width:25%; float:left; ">&nbsp;</div>
    6. </div>


    Gruß Michel

  • Das liegt daran, dass float ähnlich wie display: inline funktioniert. Die höhe der Box, die diese Eigenschaften besitzt wird im Elternelement nicht beachtet. Hilfe gibt dabei aber zum Beispiel eine unsichtbare horizontale Trennlinie mit der Eigenschaft clear: both, mit der vorher erstellte float-Eigenschaften aufgehoben werden und die Höhe wieder beachtet wird.

    Beispiel:

    Quellcode

    1. <div style="background:#FFF9F9; margin-left:153px; border:thin #000000 solid; width: 500px;">
    2. <div style="width:25%; float:left;">&nbsp;ddd</div>
    3. <div style="width:25%; float:left; ">&nbsp;</div>
    4. <div style="width:25%; float:left; ">&nbsp;</div>
    5. <div style="width:25%; float:left; ">&nbsp;</div>
    6. <hr style="height: 0; width: 0; border: 0; clear: both;" />
    7. </div>