Zweispaltige Layouts

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll ein zweispaltiges Layout erstellt werden, bei dem sich die Spaltenbreiten an der Breite des Browserfensters orientieren, wie in folgender Abbildung gezeigt.

Ein mit CSS erstelltes zweispaltiges Layout

Abbildung: Ein mit CSS erstelltes zweispaltiges Layout.

Lösung

Strukturieren Sie zunächst den Inhalt mit div-Elementen. Versehen Sie diese mit id-Attributen und passenden Werten (siehe nächste Abbildung).

Standarddarstellung der Seite

Abbildung: Die Standarddarstellung der Seite.

Zu Demonstrationszwecken benutzen wir hier für die id-Attribute Werte, die der Position im CSS-Layout entsprechen. Normalerweise würde man semantische Werte wie Hauptteil oder Seitenleiste bevorzugen anstelle von Werten wie linkeSpalte und rechteSpalte, die ihre Position in der Seite wiedergeben.

<div id="linkeSpalte">
 [...]
</div>
<div id="rechteSpalte">
 [...]
</div>
<div id="Fusszeile">
 [...]
</div>

Im Stylesheet verwenden Sie die Eigenschaft float, um den Inhalt der linken Spalte nach links zu verschieben. Gleichzeitig legen wir die Breite dieser Spalte auf zwei Drittel der Gesamtbreite des Dokuments fest:

#linkeSpalte {
 float: left;
 width: 67%;
 background: #fff;
 margin-top: 0;
 margin-right: 1.67em;
 border-right: 1px solid black;
 padding-top: 0;
 padding-right: 1em;
 padding-bottom: 20px;
}

Beachten Sie bitte, dass dem Internet Explorer für Windows bis Version 5.5 wegen seines Boxmodell-Fehlers eine eigene Breite zugewiesen werden muss (siehe das Rezept Besondere Werte für Internet Explorer 5.x für Windows).

Die rechte Spalte umfließt den Inhalt der linken Spalte. Damit die Spalte und das erste enthaltene Element auf gleicher Höhe mit der linken Spalte angezeigt werden, wird der obere Innen- und Außenabstand der rechten Spalte auf den Wert 0 gesetzt:

#rechteSpalte {
 padding-left: 2em;
 margin-top: 0;
 padding-top: 0;
}
h1 {
 margin-top: 0;
 padding-top: 0;
}

Damit die Fußzeile auch tatsächlich am unteren Ende des Dokuments angezeigt wird, erhält die Eigenschaft clear den Wert both:

#Fusszeile {
 clear: both;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 text-align: center;
}

Diskussion

Die Eigenschaft float verhält sich so ähnlich wie das HTML-Attribut align, mit dem Bilder und andere Elemente links oder rechts angeordnet werden können, während die übrigen Elemente sie umfließen:

<img src="this.jpg" width="250" height="150" hspace="7" vspace="7" alt="example" align="right" />

Wurde das Bild erst einmal rechts oder links angeordnet, können die übrigen Inhalte auf der gegenüberliegenden Seite und um das Bild herumfließen. Wurde ein Bild beispielsweise rechts angeordnet, müssen die anderen Inhalte links daran vorbeifließen, wie in folgender Abbildung gezeigt. In CSS bieten die sogenannten Floats eine ähnliche Funktionalität, ermöglichen aber darüber hinaus eine exaktere Kontrolle über die Präsentation durch die Definition von Rahmen, Innen- und Außenabständen und anderer Eigenschaften.

Ein rechts angeordnetes Bild wird von Text umflossen

Abbildung: Ein rechts angeordnetes Bild wird von Text umflossen.

Um sicherzustellen, dass die Fußzeile auch tatsächlich unterhalb der beiden Spalten dargestellt wird, erhält die Eigenschaft clear für die Fußzeile den Wert both. Dadurch wird festgelegt, dass der Inhalt der Fußzeile die als Float definierte linke Spalte nicht umfließen darf und unterhalb von (oder hinter) möglichen Floats dargestellt werden soll.

Bei dieser Technik zum Erstellen zweispaltiger Layouts gibt es allerdings eine Sache zu beachten: Der Inhalt der linken Spalte muss auf jeden Fall länger sein als der Inhalt der rechten Spalte. Da der Inhalt der linken Spalte im Dokument zuerst auftaucht, wird diese vom Inhalt der rechten Spalte umflossen. Wenn die nicht als Float definierte rechte Spalte zu viel Inhalt enthält, führt das zu der in folgender Abbildung gezeigten Anomalie.

Unerwünschter Textfluss unterhalb linker Spalte

Abbildung: Unerwünschter Textfluss unterhalb der linken Spalte.

Dieses Problem lässt sich umgehen, indem der Innen- oder der Außenabstand der rechten Spalte so angepasst wird, dass zumindest die Breite der linken Spalte auch unterhalb des Floats erhalten bleibt:

#Hauptspalte {
 width: 400px;
 /* Genug Innenabstand, um die linke Spalte auszugleichen */
 padding-left: 200px;
}
#Navigation {
 float: left;
 width: 175px;
}

Auch hier muss dem Internet Explorer für Windows bis Version 5.5 wegen des Boxmodell-Fehlers eine eigene Breite zugewiesen werden (siehe das Rezept Besondere Werte für Internet Explorer 5.x für Windows).

Wollen Sie die Position der Spalten umkehren (siehe nächste Abbildung), so ändern Sie ihre Reihenfolge einerseits im HTML-Code:

<div id="rechteSpalte">
 [...]
</div>
<div id="linkeSpalte">
 [...]
</div>
<div id="Fusszeile">
 [...]
</div>

Spalten wurden vertauscht

Abbildung: Die Spalten wurden vertauscht.

Zweitens definieren Sie für die Spalten folgende CSS-Regeln:

#rechteSpalte {
 float: right;
 width: 67%;
 padding-bottom: 20px;
 padding-top: 0;
}
#linkeSpalte {
 width: 29%;
 padding-right: 1em;
 border-right: 1px solid black;
 padding-top: 0;
}

Warnung:
In dieser Lösung verwenden wir id-Werte wie rechteSpalte und linkeSpalte, um zu betonen, welche Spalte gerade mit Stildefinitionen versehen wird. Normalerweise gilt dieses Vorgehen aber nicht als besonders sinnvoll. Stattdessen sollte besser eine semantische Beschreibung des Inhalts verwendet werden. Die Werte sollten sich also auf die tatsächlichen Inhalte der div-Elemente wie z.B. "Navigation" oder "Werbung" beziehen.

Siehe auch

Das Rezept Zweispaltige Layouts mit festen Breiten zum Erstellen eines zweispaltigen Layouts mit festen Breiten und Jeffrey Zeldmans Artikel "From Table Hacks to CSS Layout: A Web Designer’s Journal" für weitere Hintergrundinformationen zu dieser Lösung.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln