Peter Bucher - Mein Experiment, meine Spielereien, meine Welt...   ·   Stefan Falz   ·   Jürgen Gutsch   ·   Golo Roden   ·   ASP.NET Zone   ·   Microsoft ASP.NET
Willkommen bei ASP.NET Zone. Anmelden | Registrieren | Hilfe
WerbeanzeigeApose

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

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.

Veröffentlicht Mittwoch, 3. September 2008 20:17 von Peter Bucher

Kommentare

# Mehrspaltiges Layout mit DIVs und CSS

Immer wieder wird die Frage gestellt, wie man ein mehrspaltiges Layout standardkonform mit CSS für moderne

Mittwoch, 3. September 2008 23:06 by Jürgen Gutsch

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

Also mir ist an dem Beispiel oben aufgefallen das 3 divs geöffnet aber 4 divs geschlossen werden.

Valides XHTML ist das bestimmt nicht.

Gruss

Elroy

Sonntag, 29. Mai 2011 10:31 by Elroy
Anonyme Kommentare sind nicht zugelassen