Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

15.2 Ein einfaches zweispaltiges Layout

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
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.
Breite auch in Prozent oder em

Die Breite für den Rand können Sie problemlos auch in Prozent oder em angeben, solange Sie voneinander abhängige Abstände in der gleichen Einheit angeben.