Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Navigation überspringen

Floats, Aufzucht und Hege

Eigentlich ist es doch ganz einfach: Ein (beliebiges Block-) Element bekommt im Stylesheet die Eigenschaft float:left zugewiesen. Schon wird es aus dem normalen (Text-) Fluss herausgenommen, nach links positioniert und vom Rest umflossen. Aber es gibt ein paar Tücken, denn sowohl die Elemente im float, als auch außerhalb verhalten sich anders, als ohne das floatende Element:

Auf dieser Seite:

– — – — – — – — –

Breite (width) des floatenden Elements

Die Breite von floatenden Elementen muss eindeutig festgelegt sein. Sobald diese (auch) Text enthalten, der automatisch umbrochen werden kann, muß dies durch die Angabe einer festen Breite (width:) geschehen. (CSS2: Floats)

Wie ein floatendes Element darzustellen ist, dessen Breite nicht definiert ist, ist nicht festgelegt und handhabt jeder Browser anders: manche Browser nehmen die maximale Breite (IE 6.0) und manche nehmen die minimale Breite und brechen somit nach jedem Wort um (IE 5.0 unter bestimmten Bedingungen)!

zur Beispielseite float + width

– — – — – — – — –

Überlagerung von floatenden und normalen Boxen

Damit die Inhalte der normalen Blockelemente die floatenden Elemente umfließen können, überlagern sich die Boxen der floatenden Elemente mit den anderen Boxen. Also: der linke Rand (margin-left) eines links-floatendes Elements beginnt da, wo der linke Rand der nicht floatenden Box beginnt. Nur der Inhalt der nicht floatenden Box wird nach rechts verschoben.

Dies führt zu einigen, auf den ersten Blick vielleicht unerwarteten Effekten, sobald sich neben dem floatenden Element nicht nur normaler Text befindet:

Vertikaler Rand (margin) des floatenden Elements

Vertikale Ränder (margin-top, margin-bottom) des floatenden Elements werden nicht mehr mit anderen Rändern überlagert.

Normalerweise fallen Ränder aufeinanderfolgender Blockelemente zusammen (collapse), sprich: nur der größere der beiden Ränder wird verwendet (CSS2: Block-Formatierungskontext).

Die Ränder der Float-Boxen fallen nicht mit Rändern der benachbarter Boxen zusammen (CSS2: Floats).

Folge: ein <p>-Element, dass die Eigenschaft float:left zugewiesen bekommt, rutscht gegenüber einem normalen <p>-Element um den margin-top nach unten.

zur Beispielseite float-Box

Hintergrund (background) und Rahmen (border)

Der Hintergrund und der Rahmen der normalen Box geht hinter der floatenden Box weiter. Wenn das floatende Element einen durchsichtigen Hintergrund hat, werden diese sichtbar. Ein seitlicher Abstand (margin-left, margin-right) des floatenden Elements verschiebt zwar den Inhalt der normal fließenden Elemente wirkt sich auf Hintergrund und Rahmen nicht aus.

zur Beispielseite float-Box

Horizontaler Rand (margin) der normal fließenden Box

Der horizontale Rand (margin-left, margin-right) der vom floatenden Element überlagerten Box beginnt hinter dem floatenden Element. Deshalb macht sich ein linker Rand eines Elements, dass von einem Element mit der Eigenschaft float:left verdrängt wird, nicht direkt bemerkbar. Erst wenn dieser größer wird, als die Breite des floatenden Elements, wird er sichtbar.

zur Beispielseite float-Box

– — – — – — – — –

Listen neben float:left

Die oben beschriebenen Eigenschaften haben insbesondere Auswirkungen auf Listen (<ul>, <ol>, <dl>), da deren Einrückung ggf. hinter dem floatenden Element verschwindet.

Je nach Browser wird das Listenzeichen (Bullet) unterschiedlich behandelt. Dies macht sich dann insbesondere bei einer zweiten Listenebene bemerkbar. Diese ist beim Internet Explorer nicht mehr gegenüber der ersten Ebene eingerückt.

zur Beispielseite float + <ul>

– — – — – — – — –

Workaround für Listen neben float:left

Damit die Aufzählungszeichen von Listen nicht verschwinden und vor allem auch weitere Listenebenen wie sonst auch eingerückt werden, bedarf es eines Workarounds: Die Liste muß den rechten Rand des floatenden Elements als linken Rand wahrnehmen. Diese Eigenschaft haben Tabellen.

Damit sich eine Liste rechts neben einem floatenden Element wie sonst auch verhält, muß sie in ein <div>-Element mit der Eigenschaft display:table gehüllt werden. Dies geht aber nicht mit einzelnen Listenpunkte sondern nur mit der ganzen Liste, was bedeutet, dass diese das floatende Element nicht mehr umfließt, sondern vollständig rechts neben ihm angeordnet wird.

Einige veraltete Browser beherrschen kein display:table und benötigen deshalb einen zusäztlichen Workaround. Das sind zum einen der Netscape Navigator 4.x. Dieser stellt Listen rechts von floatenden Elementen auch ohne alles gut dar und bedarf daher keiner zusätzlichen Behandlung.

Zum anderen der Internet Explorer in allen Versionen bis 6.x. Dieser kann durchaus display:table verarbeiten, aber nur, wenn die geheimnisvolle Eigenschaft "hasLayout" gegeben ist. (Vgl. hasLayout Property) Hier muss man, durch bedingte Kommentare (contitional comments) vor normalen Browsern verborgen, dem <div>-Element auch noch die Eigenschaft zoom:100% geben.

Die gesamte Struktur sieht dann so aus:

<style type="text/css">
  .floatfix { display:table; }  
</style>
<!--[if IE 6]>
  <style type="text/css">
    .floatfix { zoom:100%; }  
  </style>
<![endif]-->
<div class="floatfix">

<ul>
  <li>Erster Listenpunkt
    <ul>
      <li>Erster Listenpunkt, zweite Ebene</li>
      <li>Zweiter Listenpunkt, zweite Ebene</li>
      </ul>
    </li>  
  <li>Zweiter Listenpunkt
    </li>
  </ul>
  
</div>

Urheber © Dr. Joachim Wiesemann

Letzte Aktualisierung: 27.5.2006