Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
14.7 Methode 2: Set a float to fix a float
In CSS 2.1 ist definiert, dass ein gefloatetes Element ein anderes gefloatetes Element immer einschließt. In der Literatur ist diese im Jahre 2003 von CSS-Guru Eric Meyer vorgestellte Methode als »Set a float to fix a float« bekannt geworden, was frei übersetzt so viel heißt wie »Reparieren eines Float durch Hinzufügen eines Float«.
Dieses »doppelte Floatchen« kommt zunächst mit nur einer einzigen Zeile CSS aus.
ToDo: Methode 2 – Set a float to fix a float
- Kopieren Sie die Datei galerie_float.html aus dem Basisordner für diesen Abschnitt in den Übungsordner.
- Öffnen Sie galerie_float.html im Editor.
- Ergänzen Sie die folgende Deklaration zum Floaten der div-Elemente:
div.galerie {
float: left; /* Set a float to fix a float */
width: 500px;
padding: 10px;
padding-top: 25px;
border: 1px solid black;
margin: 0 3px 3px 0;
} - Fügen Sie in den Style-Block den Style für die Klasse clearing ein:
.clearing { clear: both; }
- Ergänzen Sie den Absatz mit der Quellenangabe um die Klasse clearing, damit er unterhalb der Galerie bleibt:
<p class="clearing">Alle Fotos von ...</p>
- Speichern Sie die Webseite und betrachten Sie sie im Browser.
Die gefloateten Grafiken werden wunderbar eingeschlossen und es wird kein zusätzliches HTML-Element benötigt. Aber natürlich ist auch diese Lösung nicht perfekt, denn wenn das Browserfenster groß genug ist, stehen die gefloateten div-Elemente plötzlich nebeneinander:
Sofern dieses Verhalten vom Layout her nicht beabsichtigt ist, müssen auch die div-Elemente gecleart werden:
<div class="galerie clearing">
<img src="landschaft02.jpg" width="203" height="180" alt="Weite
Grasfläche mit Wolken und Halmen im Vordergrund" />
<h3>Landschaftsbild 02</h3>
...
</div>
Und schon haben Sie auch das potenzielle globale Clearing-Problem wieder im Boot. Der Hauptnachteil des »float to fix« ist aber, dass das Verhalten der nachfolgenden Elemente von dem gefloateten div beeinflusst wird.
Um das Problem zu lösen, floatet man je nach Layout manchmal früher oder später fast alle Elemente auf der Seite, weshalb manche Designer auch von FnE sprechen: »Floating nearly Everything«.
Außerdem bekommen bestimmte Browser (na welcher wohl?) bei komplexen Float-Verschachtelungen Probleme mit der korrekten Darstellung, und so kämpfen Sie manchmal mehr mit Browser-Bugs als mit dem Layout.
Kurzum: Mit dem Floaten ist es wie mit dem Jonglieren: Ein Ball ist einfach, zwei geht noch, aber ab drei muss man richtig üben …