In den bisherigen Kapiteln zu CSS haben Sie unter anderem das Box-Modell, Positionierung und die Grundlagen zum Grafiken positionieren mit float kennen gelernt. Mit diesem Wissen können Sie nun ein zweispaltiges CSS-Layout erstellen.

Es gibt fast immer mehrere Wege zum Ziel, und das gilt insbesondere für mehrspaltige Layouts. Die folgende Methode mit float und margin ist einfach in der Umsetzung und stabil in der Anwendung, mit anderen Worten ideal zum Lernen von CSS-Layouts.

Die Beispieldateien

Ausgangspunkt für diesen Artikel ist die folgende Webseite, die aus den vier Bereichen Kopfbereich, Navibereich, Textbereich und Fußbereich besteht:

Die Beispielseite und ihre vier Bereiche

Sie können die Beispielseiten downloaden und auf Ihrem Rechner in einem neuen Ordner entpacken:

• Download der Beispieldateien (Zip, 10 KB)

Um sich mit der HTML-Struktur der Webseite vertraut zu machen, können Sie einen Blick in den Quelltext werfen oder die Firefox-Erweiterung View Source Chart benutzen. Hier die wichtigsten Fakten im Überblick: