9.7 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung

Problem

Es soll ein vierspaltiges Layout erstellt werden, bei dem die Spaltenbreiten an die Breite des Browserfensters angepasst werden (siehe Abbildung 9-15).

Ein vierspaltiges Layout mit prozentualen Breitenangaben

Abbildung 9-15. Ein vierspaltiges Layout mit prozentualen Breitenangaben

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 Abbildung 9-16):

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

Get CSS Kochbuch now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.