Stil mit {stil}

Bilder vom Text umfließen lassen … für den Zeitschriftensatz ist diese Option im Satz tägliche Routine und selbst Word hat es über die Jahre gelernt.

Auch CSS bietet eine Lösung für schwebende Elemente, die vom Text umflossen werden: die CSS-Eigenschaft float. Allerdings führt der Einsatz von float gerade bei Bildern schnell zu einer Treppen-Formation.

Die CSS-Eigenschaft float nimmt ein Element aus dem Textfluss, um es an den linken oder rechten Rand des Blocks zu setzen und kann einen von drei Werten annehmen:

• .links { float: left } setzt das Element an den linken Rand des umfassenden Blocks,
• .rechts { float: right } setzt das Element an den rechten Rand des umfassenden Blocks,
• .fest { float: none } überschreibt die zuvor zugewiesene Eigenschaften und bringt das Element wieder in den Textfluss

float kann auf beliebige Element angewendet werden. Bei einem Bild im Text, das auf der rechten Seite des Textes schweben soll, kann das img-Tag die Eigenschaft float nutzen:

<p> <img class="fright" ... >Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis a nibh. Sed posuere.
… </p>

Das p-Element spannt den Block auf, in dem das Bild vom Text umflossen wird. Wenn nach dem Textabsatz eine Überschrift folgt und der Besucher zu allem Überfluss das Browserfenster breit aufzieht, erscheinen die Textabsätze wie Treppenstufen oder in wilder Formation.

Wir könnten natürlich noch ein paar Sätze oder leere Zeilen in den Absatz setzen, damit die Überschrift auf jeden Fall unter dem Bild landet. Aber da wir ja nie wissen, wie breit der Besucher sein Browserfenster aufzieht oder die Schriftgröße verändert, kann dies nicht die Lösung sein.

Dafür gibt es die CSS-Eigenschaft clear. Sie zwingt einen Block an den äußerst linken oder rechten Seite des umfassenden Blocks zurücks.

.clearleft { clear: left }
.clearright { clear: right }
.clearboth { clear: both }

Dann ist Schluss mit Treppenstufen und die Bilder reihen sich brav auf der rechten Seite untereinander auf.