Hauptmenü

Untermenü

HTML/CSS - Floaten - Grundlagen

1. Die Abschnitte

2. Browser

Die folgenden Beispiele wurden mit den folgenden Browsern getestet.

3. Floaten - das große Mysterium

Für Anfänger (und nicht nur die) ist es immer wieder ein Rätsel, wie man Block-Elemente nebeneinander ausrichten kann, ohne auf die ziemlich krude Methode einer absoluten Positionierung zurückgreifen zu müssen. Um denn nun ein für alle Mal Licht in das Dunkel zu bringen, zeige ich euch nun, wie man das macht und wo es Probleme gibt.

4. Grundsätzliches zum Floaten

Wie ich schon bei der HTML-Theorie zu den Elementytpen gesagt habe, haben Block-Elemente die Eigenart, die zur Verfügung stehende Breite komplett einzunehmen. Um denn nun zwei solche Elemente nebeneinander zu platzieren, muss man sie aus dem normalen Fluss herausnehmen. Das geschieht mit der CSS-Anweisung float und den Werten left oder right.

float: left;

... bedeutet, dass das nachfolgende Element so weit wie möglich versucht, sich rechts neben besagtem Element zu platzieren. Das "so weit wie möglich" bedeutet einfach gesagt, so lange genug Platz vorhanden ist.

float: right;

... ist das Gegenteil von left und bedeutet, dass das nachfolgende Elemente so weit wie möglich versucht, sich links von diesem Element zu platzieren. Ansonsten gilt dasselbe wie oben beschrieben.

Inline-Elemente und float

Normalerweise verhalten sich Inline-Elemente anders, ... solange man sie nicht mit float traktiert. Dann benehmen sie sich wie Block-Elemente und übernehmen automatisch deren Eigenschaften! Also merken! Außerdem sollte man sich darüber im Klaren sein, dass wenn man mehrere Inline-Elemente hinter ein gefloatetes Block-Element setzt, sie alle versuchen, sich entsprechend zu platzieren.

5. Das Floaten wieder aufheben

Um denn nun Elemente wieder in den normalen Fluss zu bringen, gibt es die CSS-Anweisungen clear. Damit hat man die Möglichkeit, entsprechende float-Anweisungen rückgängig zu machen. Dabei gibt es drei Möglichkeiten:

6. Der Internet Explorer

Viele Darstellungsprobleme in oben genanntem Browser beruhen auf einem unsauberen "clearen" und "floaten". Daher werde ich euch zeigen, wie man an die Sache heran geht, ohne böse Überraschungen zu erleben.

7. Beispiele

Rechts unter dem Punkt "Daten" findet ihr sowohl die Basisdateien als auch die entsprechenden Lösungen.

weiter zum nächsten Abschnitt