Der Spaltensatz mit position: absolute basiert auf der Grundidee, einem div-Bereich einen großen margin zu geben und einen anderen div-Bereich mithilfe absoluter Positionierung in diesen großen margin zu platzieren.

Das erste Beispiel ist ein einfaches zweispaltiges Layout:

Abbildung 15.1: Einfaches zweispaltiges Layout mit position: absolute

Im Beispiel gibt es die zwei div-Bereiche #textbereich und #navibereich:

• Der weiße Bereich bekommt einen großen linken Rand von 242px.
• Der hellgraue Bereich hat eine Gesamtbreite von 242px und wird in diesem großen linken Rand absolut positioniert.

Der Textbereich bleibt übrigens ein normales Block-Element im Flow und passt sich flexibel der Größe des Browserfensters an.

Der Wert 242px entsteht durch das horizontale padding und margin von div#navibereich: 200px Breite plus jeweils 10px margin links und rechts sowie 10px padding links und rechts plus jeweils 1px border links und rechts. Die genaue Pixelanzahl für den großen linken margin hängt ein bisschen vom gewünschten Layout ab, aber er muss auf jeden Fall groß genug sein, um Platz für das absolut positionierte Element zu bieten.

Absolute Positionierung ist stabil, recht einfach zu bauen und auch flexibel:

• Die Reihenfolge der div-Bereiche im HTML-Quelltext ist beliebig. Es macht nichts aus, ob der Navigationsbereich oder der Textbereich zuerst kommt.
• Um die Spalte rechts zu platzieren, geben Sie #textbereich einen großen margin-right und ersetzen für #navibereich left: 0 durch right: 0.