Zweispaltige Layouts mit festen Breiten

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll ein zweispaltiges Layout erstellt werden, bei dem die Spalten feste Breiten besitzen.

Lösung

Zu Beginn umgeben Sie die Inhalte mit div-Elementen. Diese haben id-Attribute, die hier zu Demonstrationszwecken auf die Positionierung der Elemente innerhalb der Seite verweisen (siehe nächste Abbildung):

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

Seite in Standarddarstellung

Abbildung: Die Seite in der Standarddarstellung.

Verwenden Sie nun die Eigenschaft float und legen Sie die Breite der linken Spalte unter Verwendung einer absoluten Längeneinheit anstelle eines Prozentwerts fest. Legen Sie auch die Breite des Dokuments selbst unter Verwendung einer Längeneinheit fest (siehe nächste Abbildung):

body {
 margin: 0;
 padding: 0;
 font-family: Georgia, Times, "Times New Roman", serif;
 color: black;
 width: 600px;
 border-right: 1px solid black;
}
#Kopfzeile {
 background-color: #666;
 border-bottom: 1px solid #333;
}
#linkeSpalte {
 float: left;
 width: 160px;
 margin-left: 10px;
 padding-top: 1em;
}
#rechteSpalte {
 padding-top: 1em;
 margin: 0 2em 0 200px;
}
#Fusszeile {
 clear: both;
 background-color: #ccc;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 padding-left: 200px;
}

Mit CSS erstelltes zweispaltige Layout

Abbildung: Das mit CSS erstellte zweispaltige Layout.

Diskussion

Standardmäßig erstrecken sich Block-Elemente über die Gesamtbreite des Elements, in dem sie enthalten sind. Ist das Browserfenster schmal, werden auch die Block-Elemente in ihrer Breite entsprechend angepasst, wodurch der enthaltene Text umbrochen wird.

Bei der Benutzung von absoluten Längeneinheiten anstelle von Prozentwerten bleibt die Breite der Spalten dagegen erhalten. Selbst wenn sich die Breite des Browserfensters ändert, bleiben die Spaltenbreiten unverändert.

Wenn Sie wollen, dass nur die Navigationsspalte (die linke Spalte) eine feste Breite erhält, während die Breite der Hauptspalte (die rechte Spalte) variabel ist, brauchen Sie nur die Eigenschaft width für das Element body zu entfernen.

Sollen die beiden Spalten ihre Plätze tauschen (wie in der nächsten Abbildung), so passen Sie den HTML-Code so an, wie hier gezeigt ist:

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

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.

Danach können Sie die folgenden CSS-Regeln verwenden:

#Kopfzeile {
 background-color: #666;
 border-bottom: 1px solid #333;
}
#linkeSpalte {
 width: 340px;
 margin-left: 10px;
 margin-top: 1em;
}
#rechteSpalte {
 float: right;
 width: 200px;
}
#Fusszeile {
 clear: both;
 background-color: #ccc;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 padding-left: 10px;
}

Spalten wurden vertauscht

Abbildung: Die Spalten wurden vertauscht.

Siehe auch

Das Rezept Zweispaltige Layouts zum Erstellen eines zweispaltigen Layouts mit flexiblen Breiten.

  

<< 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