Schwebende Spalten

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Es gibt eine ganze Reihe von Gründen, weshalb Sie in diesem Layout lieber schwebende als absolut positionierte Spalten benutzen sollten. Vielleicht möchten Sie noch eine Fußleiste hinzunehmen, die immer unterhalb aller Spalten angezeigt werden soll, was mit schwebenden Spalten problemlos möglich ist. Oder Sie möchten, dass die Inhalte der Seite die schwebende Spalte umfließen, statt dass sie nur in der Breite ihrer Spalte angezeigt werden. Auch das ist mit schwebenden Spalten machbar.

Wenn Sie sich dafür entschieden haben, die Seitenleiste mit float zu verschieben, müssen Sie das div-Element #extras im Dokument genau vor dem <div id="content-wrapper">-Tag einfügen.

Um diese Spalte nun zur Seite gleiten zu lassen, brauchen wir nur die Positionierungsangaben in der CSS-Regel für #extras durch die Deklaration float: left zu ersetzen. In der nächsten Abbildung sehen Sie die Auswirkungen dieser Änderung:

Abbildung: Die schwebende Spalte wird im Firefox erwartungsgemäß angezeigt.

Das war die einzige Änderung, damit die Seitenleiste im Firefox-Browser auf der linken Seite entlang des Hauptbereichs angezeigt wird. Wie Sie in der folgenden Abbildung sehen können, verursacht der Internet Explorer jedoch ein paar Schwierigkeiten mehr.

Abbildung: Der Internet Explorer 6 kann das World-Cup-Logo nicht anzeigen und schiebt den Turnierplan unter die Seitenleiste.

Wie Sie in der Abbildung sehen können, wird das World-Cup-Logo nicht mehr wiedergegeben und der Turnierplan wurde unter das Ende der Seitenleiste gedrückt. Sie werden beim Testen Ihrer Seiten im Internet Explorer 6 öfters Fehlern bei der Anwendung von CSS-Regeln begegnen. Die meisten dieser Fehler wurden in der Version 7 behoben, es wird aber unglücklicherweise noch einige Zeit dauern, bis die meisten Benutzer auf die Version 7 aktualisiert haben und die Version 6 vernachlässigt werden könnte.

In der Regel liegt der Grund für diese Fehler in dem »having layout«-Konzept des Internet Explorer. Dieses Konzept wird in dem Artikel »On Having Layout« näher erklärt. Man kann diese Fehler auf einfache Weise umgehen, indem man einem Elternelement des problematischen Elements eine von mehreren möglichen Deklarationen zuweist. Unser Problem wird durch die Anwendung von display: inline-block (Anmerkung: Theoretisch ändert diese Deklaration das Verhalten von #content, wenn es mit anderen Elementen benachbart ist. In diesem speziellen Fall, in dem es im Element #content-wrapper eingebettet ist, hat dies keine Auswirkung.) auf das div-Element #content gelöst, wie die nächste Abbildung zeigt.

Eine Liste der Eigenschaften, die dafür in Frage kommen, sowie eine Diskussion der Seiteneffekte können Sie in dem oben angegebenen Artikel »On Having Layout« nachlesen.

Abbildung: Die schwebende Spalte wird nun auch im Internet Explorer 6 wunschgemäß angezeigt.

In diesen Beispielen haben wir gezeigt, wie flexibel CSS-Layouts sein können. Anstatt Layouts mit verschachtelten Tabellen komplett neu aufbauen zu müssen, genügen einige wenige neue CSS-Regeln, um große Änderungen zu bewirken.