CSS, HTML und Javascript mit {stil}

CSS float: Positionieren

CSS positionieren

CSS 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 mit position ein speziellen Mechanismus für die Positionierung zur Hand gegeben wurde, ist float die eleganteste Alternative für das Layout von HTML-Seiten.

Dabei war CSS float ursprünglich nicht für die Positionierung gedacht, sondern für das klassische »Bild-wird-vom-Text-umflossen«. float hat sich zur beliebtesten Technik für ein Layout-Raster entwickelt:

  1. … weil float intuitiver ist und immer weniger unter Browserfehlern gelitten hat als position.
    Heute sind sich die Browser sehr nah gekommen und die Browserfehler spielen kaum noch eine Rolle, aber position eignet sich nicht mehr für ein modernes Layout-Raster.
  2. … weil kleinere Blöcke aus Text und Bildern bei Änderungen der Seite einen besseren Zusammenhang behalten.
    Blöcke mit float ändern ihre Position zusammen mit dem Text automatisch – sie »fließen« mit.
  3. … weil Bilder, Sidebars oder andere Blöcke an der linken oder rechten Seite ihres umfassenden Blocks und an der richtigen Position bleiben, egal wie lang die Blöcke werden.
  4. … weil clear alles unter alle schwebenden Blöcke zwingt – ganz gleich, wie lang der vorangehende Block wird,
  5. … weil Blöcke mit CSS float an jeder beliebigen Stelle des HTML-Dokuments auftauchen dürfen.

Bilder von Text umfließen lassen

float darf so ziemlich alles positionieren: Blockelemente wie Textabsätze und div-Container genauso wie Inlineelemente, gleich ob Bilder und span.

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.

Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna. Suspendisse ullamcorper ipsum. Duis tempus blandit eros. Aenean a leo. Vivamus posuere magna nec libero. Fusce ut odio. Morbi eget nunc. Maecenas eget ipsum vel pede vulputate adipiscing.

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

<!DOCTYPE html>
<html 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>

Wichtig! Damit z.B. eine Überschrift unter dem Text wieder in Form kommt – sprich: wieder am rechten Rand beginnt, muss style="clear: both;" für das HTML-Element (z.B. h3 { clear: both; }) notiert werden.

Spalten-Layout mit CSS 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.

.float1 {
	   float: left; 		
	   width: 27ex; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.

.float2 { 
	   float: left; 
	   width: 27ex; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.

In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.

.float3 { 
	   float: left; 
	   width: 27ex; }

Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh. Pellentesque a est sit amet nulla laoreet bibendum.

CSS float wurde schnell zu unserem beliebtesten Layoutwerkzeug, denn float kann 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.

.float1 {	
	   float: left; 		
	   width: 27ex; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.

.float2 { 
	   float: left; 
	   width: 27ex; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.

In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.

.float3 { 
	   float: left; 
	   width: 27ex; }

Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh. Pellentesque a est sit amet nulla laoreet bibendum.

<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="float4">  …  </div>

CSS float: Treppen beim Umfließen von Bildern

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.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.

In pharetra

In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.

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.

CSS clear: float beenden

CSS 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.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.

In pharetra

In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.

<style type="text/css" media="screen">
   img { float: right; margin-left: 1em; }
   h3 {clear: right; }
</style>
…
<h3><img … width="150" height="163" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, … </p>
<h3><img … width="150" height="120" /> In pharetra</h3>
<p>In pharetra. Praesent aliquet neque. … </p>
…

Das Umfließen von Bildern ist auf responsiven Webseiten komplexer, denn wir müssen darauf achten, wie sich Bilder und Text zueinander verhalten, wenn die Seite auf einem kleinen Monitor angezeigt wird.

Wenn Bilder vom Text umflossen werden sollen, ist es besser, float erst bei größeren Viewports anzuwenden (dazu mehr unter CSS Media Queries).

float vs inline-block vs display:flex

Positionieren mit CSS float war lange Zeit das Lieblingsinstrument der Front-End-Entwickler. Aber die kleinen Fallen und das Frickeln mit dem clearfix setzen einen Trend zu display:inline-block.

Die vorgegebene Breite von Blöckem mit display:inline-block hängt vom Inhalt ab und nicht von der Breite des umfassenden Containers. Aber auch das Positionieren mit display:inline-block hat seine Schattenseiten: Die Inline-Eigenschaften führen dazu, dass ein Leerzeichen zwischen den HTML-Blöcken zu einem Abstand führt.

Also überschlagen wir display:inline-block und setzen auf display:flex. Ein weiterer Vorteil von display: flex – Blöcke mit display: flex werden automatisch gleich hoch bzw. gleich breit.