Elemente von Text umfließen lassen

Textfluß um ein Bild, einen Absatz oder ein anderes Element

Um Text um ein Bild oder ein anderes Element herumfließen zu lassen, gibt es in CSS die float-Eigenschaft. Früher wurde der Umfluß mit dem align-Attribut in HTML (align="right" oder align="left") erzeugt. Darauf sollte verzichtet werden; in neueren HTML-Versionen ist das align-Attribut auch nicht mehr erlaubt. float ist ohnehin viel flexibler in der Anwendung.

Folgende Codebeispiele wurden gleich entsprechend formatiert (Du solltest die Formatierungen selbstverständlich lieber in ein externes style sheet schreiben):

style="float:left; width:22em;"

Das erste Beispiel wurde per float:left links ausgerichtet, so daß nachfolgender Text und andere Elemente rechts davon fließen; wenn Du in den Quelltext schaust, wirst Du noch die Verwendung der margin-Eigenschaft bemerken, mit der ich den Text etwas zur Seite drücke; sonst würde er direkt an dem Container kleben. Beachte, daß z. B. Netscape 4 zum Teil große Probleme mit der float-Eigenschaft hat. Auch das ist ein Grund dafür, derartige CSS-Angaben lieber in ein externes style sheet zu schreiben, das man vor älteren Browsern versteckt.

Achtung! In CSS 2.0 war es bei der Angabe von float Pflicht, zugleich auch eine Angabe für width zu machen. Dies ist in der aktuellen Version CSS 2.1 zwar nicht mehr der Fall, allerdings benötigen ältere Browser noch immer eine Breitenangabe, da sie das Element sonst auf die volle verfügbare Breite ausdehnen. Dies betrifft speziell den Internet Explorer in älteren Versionen als 5.5; und zwar sowohl unter Windows als auch auf Apple Macintosh. Entweder mußt Du also grundsätzlich eine Breite angeben (was ich hier getan habe), was jedoch nicht so flexibel ist, oder Du mußt gezielt nur die problematischen Browser mit einer Breitenangabe versorgen. Das geht am einfachsten unter Ausnutzung des whitespace-comment bugs der erwähnten Browser. Dazu mußt Du die Breite auf jeden Fall in einem style-Bereich im head oder extern angeben.

Der whitespace-comment bug (Leerzeichen-Kommentar-bug) beruht darauf, daß die erwähnten Browser CSS-Angaben ignorieren, wenn unmittelbar nach dem Selektor ein CSS-Kommentar folgt:

selector/* */ { [...] }

Wichtig ist hier das Leerzeichen: Fehlt es (selector/**/ statt selector/* */), so wird nur der IE älter als 5.5 unter Windows ausgeschlossen.

Wie läßt sich mit dem whitespace-comment bug nun ausschließlich den älteren IE-Versionen eine Breite geben? Dieser bug sorgt nämlich genau für das, was wir nicht wollen: Er schließt ältere IEs aus, wir suchen aber eine CSS-Angabe nur für diese Browser. Der Trick geht so (am Beispiel eines Absatzes p mit der Klasse remark):

/* Angaben für alle Browser: feste Breite auch für
   neuere Versionen */
p.remark {
  float:left;
  width:15em;
}

/* Angaben für neuere Browser: automatische Breite;
   wird von älteren IEs ignoriert */
p.remark/* */ {
  width:auto;
}

Erst bekommen also alle Browser eine feste Breite vorgegeben; nur neuere Browser, die nicht auf den whitespace-comment bug hereinfallen, lesen danach noch die Angabe für eine automatische Breite (das ist die Voreinstellung). Diese Browser verhalten sich also so, als hätten sie ausschließlich float:left gelesen.

Die Verwendung der Einheit em hat übrigens den Vorteil, daß sich die Länge so an die vom Benutzer eingestellte Schriftgröße anpaßt.

PS: Danke an Cheatah für den Hinweis, daß bis CSS 2.0 die Angabe von width erforderlich war. Ich kenne sonst praktisch nur CSS 2.1 ;-)

Das nächste Beispiel wird per float:right rechts ausgerichtet, so daß nachfolgender Text und andere Elemente links davon fließen.

style="float:right; width:22em;"

Per float lassen sich auch mehrere Blöcke nebeneinander anordnen. Hier noch ein Beispiel – verändere die Schriftgröße oder die Größe Deines Browserfensters, um das Verhalten besser beobachten zu können:

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Anschließend folgt ein längerer Blindtext sowie zwei etwas größere Elemente, um das Aussehen und Verhalten noch zu verdeutlichen.

Dieser Block ist links ausgerichtet und wird rechts vom nachfolgenden Inhalt umflossen.

Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand.

Dieser Block ist rechts ausgerichtet und wird links vom nachfolgenden Inhalt umflossen.

Viel Spaß!
Jane

Angelegt: Vor meiner Zeit
Letzte Bearbeitung: 2005/06/11 / 14:10:49