Flexible mehrspaltige Layouts mit Floats
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Es soll ein dreispaltiges Layout erstellt werden, bei dem sich die Spaltenbreite an der Breite des Browserfensters orientiert (siehe folgende Abbildung).
Abbildung: Ein mit CSS erstelltes dreispaltiges Layout.
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="Hauptspalte">
[...]
</div>
<div id="rechteSpalte">
[...]
</div>
<div id="Fusszeile">
[...]
</div>
Abbildung: Die Seite in der Standarddarstellung.
Im nächsten Schritt werden alle drei Spalten per Definition als Float links angeordnet. Achten Sie darauf, dass die Werte für die Breite als Prozentwerte angegeben werden und zusammen 100% ergeben (siehe nächste Abbildung):
#rechteSpalte {
width: 33%;
float: left;
background: white;
padding-bottom: 1em;
}
#linkeSpalte {
width: 20%;
float: left;
background: white;
padding-bottom: 1em;
text-align: justify;
}
#Hauptspalte {
width: 47%;
float: left;
background: white;
padding-bottom: 1em;
}
#Fusszeile {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
}
Abbildung: Ist die Hauptspalte zu breit, wird die rechte Spalte darunter geschoben.
Diskussion
Diese Methode funktioniert, weil alle Spalten als links angeordnete Floats definiert wurden und zusammen nicht breiter als 100% sind. Werden die Floats rechts angeordnet, werden zwar die Spalten vertauscht, das Resultat ist aber weiterhin das gleiche.
Stellen Sie sicher, dass für die Elemente innerhalb der Spalten korrekte Innen- und Außenabstände festgelegt wurden (es sei denn, Sie kümmern sich bereits bei der Definition der Spaltenbreiten darum). Wenn Sie das nicht tun, kann es passieren, dass die Spalten zusammen breiter sind als 100%, wodurch eine oder mehrere Spalten untereinander verschoben werden können, wie in der obigen Abbildung gezeigt. Außerdem muss für den Internet Explorer für Windows bis Version 5.5 wegen dessen Boxmodell-Fehlers eine eigene Breite zugewiesen werden (siehe das Rezept Besondere Werte für Internet Explorer 5.x für Windows), falls Sie horizontale Innenabstände und Rahmen für die div-Elemente verwenden.
Siehe auch
Das Rezept Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats zum Erstellen mehrspaltiger Layouts mit festen Breiten und den Artikel "NN4, 3 columns with Header and Footer" für Informationen zum Erstellen eines Layouts aus zwei Spalten mit fester Breite und einer dritten Spalte, deren Breite flexibel ist.
<< 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