CSS Positionieren • float

Digitale Fotografie, Erfahrungsberichte zu neuen Kameras und Bildbearbeitung

Jul 2009

Die CSS-Eigenschaft float: Schwebende Boxen für die Positionierung

: In Textverarbeitungsprogrammen wie Word und Satzprogrammen wie Quark oder InDesign kennen wir das „Umfließen“ von Blöcken auch noch nicht viel länger als die Floats aus CSS1.

Die CSS-Eigenschaft float nimmt Blöcke aus dem normalen Fluss des Dokuments und setzt sie an die linke oder rechte Seite des umfassenden Blocks, während der restliche Text des umfassenden Blocks um sie herumfließt.

Obwohl CSS uns durch die Eigenschaft position einen mächtigen Mechanismus für die Positionierung von Elementen zur Hand gegeben hat, ist float eine elegante Alternative für die Positionierung von Layout-Elementen auf einer Website. Die CSS-Eigenschaft float ist intuitiver und leidet weniger unter Browserfehlern als position. Kleinere Blöcke mit Texten oder Bildern behalten bei Änderungen der Seite einen besseren Zusammenhang mit den Texten, da sich ihre ihre Position zusammen mit dem Text automatisch ändert – sie »fließen mit«. So bleiben Bilder an der linken oder rechten Seite des Textes an der richtigen Position im Text.

Besonders geschätzt wird die Möglichkeit, eine Fußzeile durch die CSS-Eigenschaft clear immer unter schwebenden Blöcken zu positionieren. Das erlaubt Fußzeilen, die sich immer hinter den Text setzen lassen – ganz gleich, wie lang der vorangehende Block wird.

Schwebende Element können an jeder beliebigen Stelle des Dokuments auftauchen. Sie werden durch die CSS-Eigenschaft float erzeugt, die drei Werte aufweisen kann: left, right oder none. Wichtig: Für ein schwebendes Element muss immer auch eine Breite angegeben werden, ansonsten würde das float per Voreinstellung immer so breit wie der umfassende Block.

Bilder neben dem Text

So ziemlich alles darf floaten: Blockelemente wie Textabsätze und div-Container genauso wie Inlineelemente wie Bilder und span-Container.

<p style="float: left; width: 250px; ">
<div style="float:left; width 300px">
<img style="float:left; width: 120px; height: 120px; margin-right: 10px">

Schwebende Bilder halten auch in flexibel breiten Blöcken, wenn das Browserfenster verkleinert oder vergrößert wird.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> CSS-Eigenschaft float für Bilder </title>
   <style>
      body { margin: 0 9em; }
      img { float: left; margin-right: 1em; }
   </style>
</head>
<body>
   <p> <img … width="240" height="182" />Lorem ipsum dolor …</p>
   <p>In pharetra. Praesent aliquet neque. Integer  … </p>
</body>
</html>

HTML-Blöcke nebeneinander setzen

Mehrere Blöcke mit der Eigenschaft float können auf dem gleichen horizontalen Raum liegen, und zwar nebeneinander auf der gleichen Seite des umfassenden Blocks oder rechts und links auf beiden Seiten. Die erste Box wird gefloatet, und wenn für die zweite Box noch ausreichend Platz vorhanden ist, wird die zweite Box daneben gesetzt, ansonsten landet sie unter ihrem linken Nachbarn.

Spartanisch einfache und doch flexible Bilder-Galerie: Bilder mit der Eigenschaft float: left nebeneinander setzen. Wenn das Browserfenster verändert wird, nehmen die Bilder zwar einen breiteren Raum ein, aber sie beeinflussen das Layout nicht.

<div>
   <img style="float: left; margin-right: 3px;" … width="136" height="105" />
   <img style="float: left; margin-right: 3px;" … width="130" height="105" />
   <img style="float: left; margin-right: 3px;" … width="130" height="105" />
…
</div>

Wichtig! Damit der Text darunter sofort wieder in Form kommt, muss der nächste Absatz mit style="clear: both;" notiert werden.

Spalten-Layout mit float

Auf diese Weise lassen sich auch HTML-Blöcke für das Layout der Seite für große Monitore nebeneinander setzen. Wenn das Browserfenster kleiner ist oder die Auflösung nicht für alle Spalten reicht, kollabieren die Spalten und erscheinen untereinander.

Das könnte zu unserem Lieblingslayout werden, denn nun könnten wir unseren Besuchern mit großen Monitoren ein Drei- oder Vier-Spalten-Layout bieten, während das Layout für Besucher mit kleinen Monitoren zu einem Zwei-Spalten-Layout mutiert. Immerhin wird es höchste Zeit, sich um das Erscheinungsbild von Webseiten auf den kleinen Monitoren unserer mobilen Endgeräte zu kümmern.

<style type="text/css" media="screen">
    .float1 { float: left; width: 12em; }
    .float2 { float: left; width: 24em; }
    .float3 { float: left; width: 12em; margin-bottom: 1em; }
</style>
…
<div class="float1"> 
        …
 </div>

<div class="float2"> 
   <p>Lorem ipsum   </p>
   <p>In pharetra.  </p>
   <p>Pellentesque  </p>
</div>

<div class="float3"> 
        …
</div>

<div class="float3"> 
        …
 </div>

float mit Treppenstufen

Wenn Textabsätze mit links oder rechts schwebenden Bildern gesetzt nicht so hoch sind wie das schwebende Bild, entstehen in aufeinander folgenden Textblöcken Treppenstufen.

Damit der folgende Absatz wieder bis an den rechten (oder linken Rand rutscht), braucht er die CSS-Eigenschaft clear.

clear weist vier Werte auf: left, right, both und none. clear: right als Stil für die Überschrift sorgt dafür, dass eine Überschrift so weit nach unten geschoben wird, dass sie unter einem rechts schwebenden Element landet und wieder bis zur äußerst rechten Seite des umfassenden Blocks läuft.

clear: Umfließen von Blöcken beenden

clear: left schiebt ein Element so weit nach unten, dass es unter einem links schwebenden Element steht, clear: both versetzt das Element sowohl unter rechts als auch unter links schwebende Boxen. Wenn die CSS-Eigenschaft float in einem Dokument benutzt wird, definiert man z.B. alle Überschriften vorsichtshalber mit der Eigenschaft clear: both, damit sie nicht neben schwebenden Blöcken, sondern immer unter ihnen landen.