CSS Kochbuch

9.8 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung

Problem

Es soll ein vierspaltiges Layout erstellt werden, dessen Spalten eine feste Breite besitzen.

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:

<div id="Kopfzeile">
 [...]
</div>
<div id="linksAussen">
 [...]
</div>
<div id="linksInnen">
 [...]
</div>
 [...]
<div id="rechtsInnen">
  [...]
</div>
 [...]
<div id="rechtsAussen">
 [...]
</div>

Dann geben Sie der Eigenschaft position für alle Spalten den Wert absolute. Mit den Eigenschaften left und top legen Sie die Positionen für die Spalten fest, wobei in diesem Fall Pixel als Einheiten benutzt werden: ...