Die Mischung aus float und margin zur Erstellung mehrspaltiger Layouts ist stabil, übersichtlich und einfach zu realisieren, hat aber zwei potenzielle Nachteile:

• Ein clear im statischen (nicht positionierten) Textbereich kann durch seine globale Wirkung zu Problemen führen.
• Die mittlere Spalte #textbereich muss im Quelltext zwingend nach den gefloateten Randbereichen stehen.

Aus diesem Grund möchte ich Ihnen im Folgenden noch kurz eine andere Methode zur Erstellung von float-basierten Layouts vorstellen, bei der erstens ein clear im Textbereich auf den Textbereich beschränkt bleibt und zweitens die Reihenfolge der Bereiche im HTML etwas flexibler ist.

Zunächst erstellen Sie damit wieder ein zweispaltiges Layout:

• Die erste Spalte schwebt mit float:left nach links
• Die zweite Spalte geht mit float:right nach rechts.

Weil die Floats in verschiedene Richtungen gehen, wird diese Methode auch entgegengesetzte Floats (opposing floats) genannt.

Eine andere Reihenfolge im HTML

Ein Vorteil der entgegengesetzten Floats ist, wie gesagt, dass Sie im HTML die Reihenfolge von #textbereich und #navibereich einfach umdrehen können, ohne dass das Layout sich ändert.

Letztendlich ist es also egal, in welcher Reihenfolge die beiden Layoutbereiche im Quelltext stehen, aber in den drei HTML-Dateien aus dem Basisordner für diesen Abschnitt habe ich die Reihenfolge einmal geändert:

<div id="wrapper">
  <div id="kopfbereich"> ...</div>
  <div id="textbereich">
 
  </div> <!-- Ende #textbereich -->
 
  <div id="navibereich">
 
  </div> <!-- Ende #navibereich -->
 
  <div id="fussbereich"> ...</div>
</div>

Einige Webdesigner bevorzugen diese Quelltext-Reihenfolge, da im Rahmen der Barrierefreiheit der Inhalt dann vor der Navigation steht und Benutzer ohne CSS sich nicht erst durch die Navigation kämpfen müssen, um den Inhalt zu finden.

Andere Designer belassen die Navigation vor dem Inhalt, bieten Besuchern ohne CSS aber einen Skip-Link. Beides sind diskutierbare Meinungen, keine unumstößlichen Tatsachen, und eigentlich nicht wichtig genug für Glaubenskriege.

Apropos Skip-Link. Der springt auf allen drei Seiten zum Textbereich, der jetzt aber sowieso direkt nach dem Kopfbereich kommt. Sinnvoller wäre da ein Link zur Navigation:

<div class="skiplink"><a href="#navibereich">Zur Navigation</a></div>

Auch das ist in den drei Webseiten aus dem Basisordner bereits erledigt.

Das CSS für entgegengesetzte Floats anpassen

Für die entgegengesetzten Floats muss gegenüber dem Beispiel mit float und margin nur der Style für #textbereich ein bisschen geändert werden:

• Der linke Außenrand wird nicht mehr benötigt und kann gelöscht werden.
• Der gesamte Textbereich wird nach rechts gefloatet und bekommt deshalb eine feste Breite.

Und los geht's.

Optisch hat sich im Browser nichts geändert, nur im Quelltext kann der Textbereich jetzt vor dem Navigationsbereich stehen und ein clear im Textbereich hätte keine Auswirkungen mehr auf den Navibereich:

Abbildung 16.12: Entgegengesetzte Floats – optisch kein Unterschied