CSS, HTML und Javascript mit {stil}

CSS Positionieren: Spalten gleicher Höhe

CSS positionieren: Spalten gleicher Höhe

CSS-Layout ist pures Schubladendenken: ein Block für die Navigation, einer für die Inhalte, einer für die Fussleiste, einer für die obere Leiste. Die Positionierung von HTML-Blöcken mit CSS float ist intuitiv und genial einfach für ein Design mit zwei oder drei Spalten.

Aber wenn die Spalten ihre eigene Hintergrundfarbe aufweisen, kommt eine Hürde ins Spiel: Beim Positionieren mit float wird jede Spalte im Layout nur so hoch wie ihr Inhalt. Aber das Layout von Webseiten mit CSS2 in Spalten ist eine Herausforderung, wenn farbige Spalten immer gleich lang sein sollen. Ohne Tricks gibt float keine Spalten in gleicher Höhe her. Ein Hintergrundbild für das body-Element der Webseite wäre eine Lösung – allerdings nur für Spalten fester Breite.

Die langfristige Lösung für Spalten gleicher Höhe ist display:flex, dass von den Browsern bereits umfassend unterstützt wird – in IE9 noch nicht, in IE10 mit einer älteren Syntax und korrekt erst ab IE11.

Die Alternative: display:flex rendert Blöcke in einer Reihe – also als Spalten – in gleicher Höhe.

Schritt 1: Drei Spalten mit CSS float

Liegen die Spalten wie in diesem Beispiel in einem Block (#wrap), hat #wrap keine Höhe, da die drei Blöcke unterhalb von #wrap mit CSS float positioniert sind. Darum wird die Hintergrundfarbe des umfassenden Blocks #wrap in diesem Beispiel nicht sichtbar.

  • Ein Block, für den CSS float definiert ist, verändert die Höhe des umfassenden Blocks nicht.
#wrap { background: slateblue; }
#spalte-1 { float: left; width: 200px; background: blue; }
#spalte-2 { float: left; width: 200px; background: green; }
#spalte-3 { float: left; width: 200px; background: red; }
…
<div id="wrap">
    <div id="spalte-1"> … </div>
    <div id="spalte-2"> … </div>
    <div id="spalte-3"> … </div>
</div>

Nur wenn der umfassende Block #wrap selber mit CSS float positioniert wird, wird er so hoch wie sein Inhalt.

  • Ein Block, für den CSS float definiert ist, wird so hoch wie sein Inhalt.

Dieses Merkmal der CSS-Eigenschaft float verhilft zusammen mit relativer Positionierung zum gewünschten Layout von drei gleich hohen farbigen Spalten.

Schritt 2: Ein umfassender Block pro Spalte

Um drei gleich hohe Spalten zu konstruieren, liegen die Blöcke für die Spalten verschachtelt in drei umfassenden Blöcken: ein umfassender Block pro Spalte. Die umfassenden Blöcke bekommen die Hintergrundfarbe zugewiesen. Aus den Spaltenblöcken kann die Hintergrundfarbe gelöscht werden.

#wrap-1 { float: left; background: blue; }
#wrap-2 { float: left; background: green; }
#wrap-3 { float: left; background: red; }
…
<div id="wrap-3">
    <div id="wrap-2">
        <div id="wrap-1">
            <div id="spalte-1"> … </div>
            <div id="spalte-2"> … </div>
            <div id="spalte-3"> … </div>
        </div>
    </div>
</div>

Die Blöcke #wrap-1, #wrap-2 und #wrap-3 liegen übereinander, der zuletzt aufgeführte innere Block wrap-1 liegt oben, so dass der Hintergrund blau ist.

Dies ist Text in Spalte 1. Dies ist Text in Spalte 1. Dies ist Text in Spalte 1.

Dies ist Text in Spalte 1. Dies ist Text in Spalte 1. Dies ist Text in Spalte 1.

Dies ist Text in Spalte 2. Dies ist Text in Spalte 2. Dies ist Text in Spalte 2. Dies ist Text in Spalte 2.

Dies ist Text in Spalte 2. Dies ist Text in Spalte 2. Dies ist Text in Spalte 2. Dies ist Text in Spalte 2.

Dies ist Text in Spalte 3. Dies ist Text in Spalte 3.

Dies ist Text in Spalte 3. Dies ist Text in Spalte 3.

Schritt 3: Verschieben der umfassenden Blöcke

Damit die Hintergrundfarbe der beiden anderen Blöcke erscheint, werden die Blöcke mit position: relative positioniert und nach links verschoben.

#col-1 { width: 90px;  float: left; }
#col-2 { width: 320px; float: left; }
#col-3 { width: 140px; float: left; }

#wrap-1 { background: blue; float: left; position: relative; right: 320px; } 
#wrap-2 { background: green; float: left; position: relative; right: 140px; } 
#wrap-3 { background: red; float: left; } 
Dies ist der Text in Spalte 2. Dies ist der Text inSpalte 2. Dies ist der Text in Spalte 2. Dies ist der Textin Spalte 2. Dies ist der Text in Spalte 2. Dies ist derText in Spalte 2.Dies ist der Text in Spalte 2. Dies ist der Text inSpalte 2.Dies ist der Text inSpalte 1. Dies istder Text in Spalte 1.Dies ist der Text inSpalte 1.Dies ist der Text inSpalte 1. Dies istder Text in Spalte 1.Dies ist der Text in Spalte 3.Dies ist der Text inSpalte 3.Dies ist der Text in Spalte 3.Dies ist der Text in Spalte 3.Dies ist der Text inSpalte 3.Preview: Drei Spalten gleiche Höhe

Im Browserfenster verschiebt sich dabei die ganze Seite nach links – die linke und die mittlere Spalte liegen außerhalb des Browserfensters. Damit der Inhalt in col-1, col-2 und col-3 wieder zurück nach rechts ins Browserfenster wandert, werden die drei Spalten ebenfalls relativ positioniert.

Schritt 4: Drei Spalten zurück ins Browserfenster schieben

In diesem Beispiel werden die drei Spalten um 460px verschoben – die Summe der Breiten der mittleren und rechten Spalte.

#col-1 { width: 90px;  float: left; position: relative; left: 460px; }
#col-2 { width: 320px; float: left; position: relative; left: 460px; }
#col-3 { width: 140px; float: left; position: relative; left: 460px; }
Dies ist der Text in Spalte 2. Dies ist der Text inSpalte 2. Dies ist der Text in Spalte 2. Dies ist der Textin Spalte 2. Dies ist der Text in Spalte 2. Dies ist derText in Spalte 2.Dies ist der Text in Spalte 2. Dies ist der Text inSpalte 2.Dies ist der Text inSpalte 1. Dies istder Text in Spalte 1.Dies ist der Text inSpalte 1.Dies ist der Text inSpalte 1. Dies istder Text in Spalte 1.Dies ist der Text in Spalte 3.Dies ist der Text in Spalte 3.Dies ist der Text inSpalte 3.Dies ist der Text in Spalte 3.Dies ist der Text in Spalte 3.Dies ist der Text inSpalte 3.Preview: Drei Spalten gleiche Höhe

An dieser Stelle muss nur noch der überstehende blaue Block (unter dem auch noch der grüne Block ein Stück über den Rand hinausragt) abgeschnitten werden. Da der alles umfassende rote Block die dazustellende Breite der drei Spalten aufweist, reicht es, wenn overflow: hidden für den äußeren Block #wrap-3 ins CSS geschrieben wird.

#col-1 { width: 90px;  float: left; }
#col-2 { width: 320px; float: left; }
#col-3 { width: 140px; float: left; }

#wrap-1 { background: blue; float: left; position: relative; right: 320px; } 
#wrap-2 { background: green; float: left; position: relative; right: 140px; } 
#wrap-3 { background: red; float: left; overflow: hidden; } 

Das Prinzip der umfassenden Blöcke – jeweils ein Block pro Spalte – kann in gleicher Weise auf zwei oder vier Spalten angewendet werden: Pro Spalte wird ein umfassender Block hinzugenommen, der für die Hintergrundfarbe der jeweiligen Spalte verantwortlich ist.