Direktnavigation

Bookmark and Share

Weitere Infos (Randbereich)

Sie lesen gerade:

Little Boxes 1

Little Boxes Teil 1 - Webseiten gestalten mit HTML und CSS (Grundlagen)

Beispielseiten

Inhaltsbereich

15.3 Ein einfaches dreispaltiges Layout

Eine dritte Spalte ist ebenfalls sehr einfach zu realisieren:

  • Die statische Spalte #textbereich bekommt auch auf der rechten Seite einen breiten Außenrand.
  • In diesen Rand wird ein dritter Bereich ebenfalls mit absoluter Positionierung platziert.

Im Browser sieht das dann ungefähr so aus:

Abbildung 15.2: Ein einfaches dreispaltiges Layout mit position: absolute
Abbildung 15.2: Ein einfaches dreispaltiges Layout mit position: absolute

Die Bereiche rechts und links außen sind absolut positioniert. Der weiße Textbereich in der Mitte ist nach wie vor im Flow und passt sich dem Browserfenster flexibel an:

Abbildung 15.3: Der mittlere Bereich passt sich dem Browserfenster an
Abbildung 15.3: Der mittlere Bereich passt sich dem Browserfenster an