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)

Inhaltsbereich

15.1 CSS und mehrspaltige Layouts

In der aktuellen CSS Version 2.1 ist eigentlich kein Spaltensatz für mehrspaltige Layouts vorgesehen. Auch das mit Tabellen einfach zu realisierende Konzept gleich langer Spalten gibt es in CSS nicht.

So haben sich Webdesigner im Laufe der Jahre einiges einfallen lassen, um dieses Manko zu beheben. Auf Ihren Streifzügen durch das Web werden Sie viele Beispiele finden, die mehrspaltige Layouts auf zum Teil völlig verschiedenen Wegen realisieren, und diese Vielfalt ist anfangs eher verwirrend als hilfreich.

Es gibt nicht die perfekte Methode, denn alle Ansätze haben Vor- und Nachteile. Während die Webwelt auf den heiligen Gral des CSS-Layouts wartet, können Sie sich die Wartezeit mit den nicht perfekten, aber durchaus funktionierenden Möglichkeiten verkürzen, die im Wesentlichen auf zwei Prinzipien beruhen:

  • position:absolute und margin
  • float in diversen Varianten

Mehrspaltige Layouts mit float lernen Sie in den nächsten Kapiteln kennen, jetzt geht es los mit einigen Übungen zu position: absolute. Sie können die Beispiele gerne als Grundlage für eigene Layouts benutzen.

Position oder Float? Die Web Developer Toolbar hilft

Wenn Sie bei Ihren Streifzügen durch das Web herausfinden möchten, ob ein Layout mit float oder mit position:absolute erstellt wurde, brauchen Sie nicht den Quelltext zu analysieren.

In der Web Developer Toolbar gibt es im Menü HERVORHEBEN ein Untermenü POSITIONIERTE ELEMENTE HERVORHEBEN mit den vier Optionen ABSOLUTE, FIXED, FLOAT und RELATIVE. Sind auf der Webseite entsprechende Elemente vorhanden, werden diese rot umrandet.