Stil mit {stil}

Mar 09

CSS float • Schwebende Boxen für die Positionierung

Die CSS-Eigenschaft float erzeugt schwebende Elemente am rechten oder linken Rand der umgebenden Box – z.B. Bilder oder auch Layout-Elemente. Das Element verdrängt den Text und ahmt so die Positionierung in Satzprogrammen wie Quark, InDesign und Textprogrammen wie MS Word nach, in denen Bilder neben dem normalen Textfluss stehen können.

#spalte1 { width: 120px; float: left; margin-right: 10px; }
…
<div id="spalte1">
<img src="…" … />
<ul> … </ul>
</div>

<div id="spalte2"><p>Lorem ipsum dolor sit amet … </p></div>

<div id="spalte3"><p>Aliquam tempus ipsum … </p></div>

Das Element wird an den linken bzw. rechten Rand des umfassenden Blocks gelegt. Die obere Kante eines mit float positionierten Elements ist durch seine Lage im Textfluss bestimmt. Die CSS-Eigenschaft margin kann herangezogen werden, um einen Abstand innerhalb des umfassenden Blocks anzugeben.

Mit float positionierte Elemente verdrängen die Inhalte der folgenden Blöcke. Die Höhe des schwebenden Elements wird durch seine Inhalte oder durch die Angabe von height bestimmt. Am Ende des Elements können die folgenden Elemente wieder über die gesamte Breite des umfassenden Blocks laufen.

Die CSS-Eigenschaft clear für ein Element, das einem mit float positionierten Element folgt, zwingt die Inhalte dieses Elements unter den schwebenden Block, so dass die Inhalte wieder über die gesamte Breite des umfassenden Blocks laufen.

float

IE4+ M1 N4+ O5+ S1 CSS1 Erblich: Nein

float

bestimmt, dass ein Element an den linken bzw. rechten Rand des umfassenden Elements versetzt wird – ähnlich dem "Umfließen" von Bildern im Satzprogramm und in der Textverarbeitung. float ist eine von zwei Eigenschaften, mit denen die Positionierung eines Elements gesteuert werden kann. Die andere Eigenschaft ist position.

Werte

left | right | none | inherit

Bilder und Texte, die eingebettet in Texten oder anderen Elementen dargestellt werden, werden als "schwebende Elemente" (floating elements) bezeichnet.

left

platziert ein Element auf der linken Seite des Textes.

right

platziert ein Element auf der rechten Seite des Textes.

none

ist die Vorgabe und stellt ein Element dort dar, wo es im Text steht.

Bemerkung: Für ein schwebendes Element muss immer auch eine Breite angegeben werden, ansonsten würde das schwebende Element immer so breit wie der umfassende Block. Bei schwebenden Bildern ist die Breitenangabe im <img>-Tag bereits enthalten, bei schwebenden Texten muss die Breite expliziet angegeben werden.

Beispiel: Bilder von Text umfließen lassen

Zu den klassischen Anwendungen der Eigenschaft float gehört das Umfließen von Bildern mit Text – ähnlich wie beim Layout von Printmedien.

<p>
    <img style="float: right; margin-left: 9px;" … /> 
      Lorem ipsum dolor sit amet, ... 
</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat. Donec feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula magna, fermentum quis, congue quis, mattis eget, lacus.

Beispiel: Initiale mit float

.initiale { 
    float: left; 
    font: normal 4em/110% Georgia, Times, serif; 
    color: maroon; 
    margin-right: 0.2em;
}
…
<p><span class="initiale">L</span>orem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat. Donec feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Hinweis: Die Initiale kann auch ohne Eingriff in den HTML-Code durch das Pseudoelement first-letter erzeugt werden.

Beispiel: Positionieren mit float

Als Technik für die Positionierung von Layoutelementen sind schwebende Elemente einfach und raffiniert zugleich. Ein Drei-Spalten-Layout mit einem Seitenkopf und Seitenfuß wird durch div-Elemente realisiert.

<div>Kopfzeile</div>
<div style="float: left; width: 25%;"><h3>Linke Spalte</h3></div>
<div style="float: left; width: 40%;"><h3>Mittlere Spalte</h3></div>
<div style="float: right; width: 25%;"><h3>Rechte Spalte</h3></div>
<div style="clear: both;">Fußleiste</div>

zurück zum Seitenanfang