Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll ein dreispaltiges Layout mit festen Breiten erstellt werden.

Lösung

Zuerst 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="Hauptspalte">
 [...]
</div>
<div id="linkeSpalte">
 [...]
</div>
<div id="rechteSpalte">
 [...]
</div>
<div id="Fusszeile">
 [...]
</div>

Seite in der Standarddarstellung

Abbildung: Die Seite in der Standarddarstellung.

Im nächsten Schritt umgeben Sie die div-Elemente für die Hauptspalte und die linke Spalte mit einem weiteren div-Element. Dieses erhält ein eigenes id-Attribut mit dem Wert enclose. Schließlich werden alle div-Elemente noch einmal mit einem div-Element umgeben, dessen id-Attribut den Wert frame erhält.

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

Mit Hilfe eines ID-Selektors für das div-Element frame wird die Gesamtbreite der Seite festgelegt:

#frame {
 margin-left: 20px;
 width: 710px;
}

Anschließend werden die div-Elemente für die Spalten sowie das div-Element mit dem id-Wert enclose als Floats definiert (siehe nächste Abbildung):

#Hauptspalte {
 float: right;
 width: 380px;
}
#linkeSpalte {
 float: left;
 width: 150px;
}
#rechteSpalte {
 float: right;
 width: 120px;
}
#enclose {
 float: left;
 width: 560px;
}
#Fusszeile {
 clear: both;
 padding-top: 1em;
 text-align: center;
}

Dreispaltiges Layout mit festen Spaltenbreiten

Abbildung: Dreispaltiges Layout mit festen Spaltenbreiten.

Diskussion

Da die Spaltenbreite in Pixeln angegeben wurde, kann sie nicht verändert werden. Damit die Spalten angezeigt werden, müssen Sie die Hauptspalte und die linke Spalte mit einem zusätzlichen div-Element umgeben. Durch das zusätzliche div-Element mit dem id-Attribut enclose werden die linke und die mittlere Spalte als Float definiert und links angeordnet. Innerhalb dieses div-Elements wird die Hauptspalte rechts angeordnet und die linke Spalte links.

Siehe auch

Das Rezept Flexible mehrspaltige Layouts mit Floats zum Erstellen eines dreispaltigen Layouts mit flexibler Spaltenbreite.

  

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