31.12.2007

Faux Columns - Gleiche Längen für die Divs

Ein Nachteil von Divs gegenüber Tabellen ist der, dass sie - sofern ihre Höhe nicht definiert ist - immer die Höhe ihres Inhalts annehmen. Bei nebeneinander angeordneten Divs sieht dies je nach Inhalt zum Beispiel dann so aus:
Beispiel 1

Navi, Content und Adbar befinden sich in einem sie umfassenden "Wrapper", der zwecks besserer Verdeutlichung für die blaue Umrandung sorgt. Ihm kommt später noch eine bedeutendere Funktion zu. Die drei darin angeordneten Elemente haben jeweils eigene Hintergrundfarben und einen kleinen Zwischenabstand. Den CSS- und HTML-Code könnt ihr dem Quelltext von Beispiel 1 entnehmen.

Wichtig:
Achtet unbedingt darauf, dass vor dem Schließen des Wrappers gecleart wird, sonst wird in manchen Browsern dessen Rahmen nicht dargestellt:

</div><!--Ende adbar-->
<div style="clear: both;"></div>
</div><!--Ende wrapper-->

Ziel ist es nun, alle drei Container auf die gleiche Länge zu bringen, so dass sie einheitlich unten abschließen. Dabei soll es unerheblich sein, welcher Container jeweils den längsten Text enthält. Weil die Textlänge variieren kann, bringen uns einheitliche Höhenangaben nicht weiter.

Da es bisher noch keine CSS-Angabe gibt, um diese Anforderungen zu erfüllen, müssen wir uns mit den sogenannten Faux Columns behelfen.

Beachte:
Die nachfolgende Anleitung funktioniert nur bei sogenannten "fixen Layouts" wo die Container feste Pixelbreiten oder vergleichbare Festwerte haben. Für "flexible Layouts" mit prozentualen (relativen) Breiten sei auf diese Anleitung verwiesen.

Wir müssen hierzu etwas rechnen, benötigen ein Grafikprogramm, mit dem wir uns eine kleine Hintergrundgrafik basteln, und müssen schließlich unseren CSS- und HTML-Code aus Beispiel 1 noch etwas anpassen.

Der Trick besteht darin, dass wir unseren Wrapper mit einer sich vertikal kachelnden Hintergrundgrafik versehen, die in ihrem Querschnitt dem Layout aus Beispiel 1 entspricht. Da sich der Wrapper in seiner Länge immer dem längsten Div den er beinhaltet anpasst, kachelt sich die Hintergrundgrafik auch automatisch für die kürzeren Divs bis an den unteren Rand.
Um diese Grafik zu erstellen benötigen wir zunächst pixelgenaue Breitenwerte unserer drei Container unter Berücksichtigung der Zwischenabstände.

Rechenoperationen für die Hintergrundgrafiken

Je nach individuellem Layout müsst ihr eure eigenen Werte entsprechend anpassen. In unserem Beispiel beträgt die Gesamtbreite des Layouts 800px. Da sich die Grafik vertikal kachelt, spielt ihre Höhe keine Rolle. Theoretisch würde bereits 1px ausreichen. Zur besseren Verdeutlichung wurden hier 20px Höhe gewählt.
Den einzelnen Containern liegt folgender CSS-Code zugrunde (Hinweis: Das "display: inline;" ist lediglich für den Internet Explorer 6 wegen dessen Doubled-Float-Margin-Bugs" erforderlich) :

#wrapper
{
width: 800px;
margin: 10px auto;
font-size: 0.9em;
border: 1px solid blue;
}

#navi
{
float: left;
width: 160px;
padding: 5px;
background: #809FFF;
}

#content
{
width: 450px;
float: left;
margin-left: 10px;
display: inline;
padding: 5px;
background: #BFCFFF;
}

#adbar
{
width: 140px;
padding: 5px;
float: left;
display: inline;
margin-left: 10px;
background: #E6ECFF;
}

Bei den Breiten müssen wir entsprechend dem Boxmodell auch noch den Innenabstand (padding) und den Außenabstand (margin) berücksichtigen. Somit berechnen sich die einzelnen Teilelemente unserer späteren Gesamtgrafik wie folgt:

Navi
160px Breite + (2 x 5px) Padding = 170px Breite
Also benötigen wir eine Navi-Grafik vom Format 170px x 20px im Farbton #809FFF;
Navi

Content
450px Breite + (2 x 5px) Padding = 460px Breite
Die Content-Grafik hat somit das Format 460px x 20px im Farbton BFCFFF;
Content

Adbar
140px Breite + (2 x 5px) Padding = 150px Breite
Die Adbargrafik ist damit 150px x 20px groß und hat den Farbton E6ECFF;
Adbar

Spacer
Für den Zwischenabstand, der unserem Margin-Wert entspricht benötigen wir schließlich noch zwei identische Grafiken im Format 10px x 20px, Farbton #E0E0E0;
Spacer  Spacer

Diese fünf Einzelgrafiken, welche ich mit der Grafiksoftware Ulead Photo Impact X3 erstellt habe, kopiert ihr nun und fügt sie in eine leere, 800px x 20px große Gesamtgrafik ein. Ich habe diese unter "wrapperbg.jpg" abgespeichert. Diese sieht dann so aus:
wrapperbg

Modifizierung des CSS- und HTML-Codes

Um sicher zu gehen, dass niemand schummelt, löschen wir zunächst aus unserem Beispiel 1 die Hintergrundfarben bei #navi, #content und #adbar. Damit sieht unsere Seite etwas spärlich aus wie wir in Beispiel 2 sehen.

Jetzt benötigen wir nur noch einen Schritt, damit unsere drei Container wieder Hintergrundfarbe bekommen, vor allem aber gleich lang sind.
Zu diesem Zweck weisen wir unserem Wrapper die zuvor erstellte Hintergrundgrafik zu:

#wrapper
{
width: 800px;
margin: 10px auto;
font-size: 0.9em;
border: 1px solid blue;
background-image: url(wrapperbg.jpg)
}

Wichtig:
Achtet unbedingt darauf, dass vor dem Schließen des Wrappers gecleart wird, sonst wird in manchen Browsern dessen Hintergrundgrafik nicht dargestellt:

</div><!--Ende adbar-->
<div style="clear: both;"></div>
</div><!--Ende wrapper-->

Zum Schluss noch ein Klick auf Beispiel 3 und wir erkennen, dass unsere drei Container trotz unterschiedlichen Textlängen die gleiche Länge haben.

nach oben