Faux Columns / Unechte Spalten oder: Wie werden zwei Divs gleich hoch?

Peter Bucher — Wed, 03 Sep 2008 18:17:00 GMT

Viele kennen sicherlich das Problem bei der Benutzung von CSS, dass zwei Spalten nicht gleich hoch werden,
bzw. sich die Spalte mit weniger Inhalt nicht an der höheren anpasst.

Rein mit XHtml / CSS Mitteln ist es ~~nicht möglich~~ (Für manche Fälle schon, wie Jürgen beschreibt) das zu erreichen, da muss getrickst werden.
Ein bzw. _der_ Trick ist als "Faux Columns" oder auf Deutsch "Unechte Spalten" bekannt.

Ausgangslage ist bspw. folgendes Markup:

CSS:

#left {
    float: left;
    width: 200px;
    background-color: gray;
}
#right {
    margin-left: 200px;
}

XHTML:

 
<div id="left">
    &nbsp;
</div>
<div id="right">
    <!-- Viel Inhalt -->
</div>
</div style="clear: left;">

Also simple zwei Spalten.
Die graue Hintergrundfarbe geht jedoch nicht so weit nach unten, wie die linke Spalte.
Mithilfe der "Faux Colums" Technik wird die Verlängerung nach unten der ersten Spalte mithilfe eines Bildes simuliert.
Es braucht dazu ein Bild das 1 Pixel hoch und x Pixel breit ist und dazu noch einen Container der die zwei Spalten umschliesst.

Der innere Container der höher ist, macht den umgebenden Container höher, d.h. er passt sich immer an der längsten Spalte an,
genau das nutzen wir aus.
Dabei wird auf den umschliessenden Container ein Hintergrundbild gesetzt, dieses in der y-Richtung (Nach unten) wiederholt und ggf. noch ausgerichtet (left / Prozent- oder Pixelangaben).

So das die Lösung schlussendlich so aussieht:

Zusätzliches CSS:

#wrapper {
    background: url(Bild.jpg) repeat-y left;
}

Finales XHTML:

 
<div id="wrapper">
    <div id="left">
        &nbsp;
    </div>
    <div id="right">
        <!-- Viel Inhalt -->
    </div>
    </div style="clear: left;">
</div>

Zusätzlich zu dieser kleinen Demonstration empfehle ich den Artikel auf alistapart, oder die deutsche Übersetzung davon.

Peter Bucher : Faux Columns

Faux Columns / Unechte Spalten oder: Wie werden zwei Divs gleich hoch?