2.5 Reihenfolge der Spalten-Container im Quelltext
Bei den beiden Spalten #col1 und #col2 handelt es sich um float-Umgebungen. Bei der dritten Spalte #col3 handelt es sich um einen statischen DIV-Container. Die Reihenfolge, in der die drei Container im Quelltext erscheinen ist daher nicht beliebig wählbar. Die float-Objekte (#col1 und #col2) müssen im Quelltext immer vor dem statischen Objekt (der mittleren Spalte #col3) stehen. So funktionieren Fließumgebungen.
Die CSS-Deklarationen der float-Spalten finden sich in der Datei css/main/base.css:
#col1 {
float: left;
width: 200px; /* Standard-Wert */
}
...
#col2 {
float: right;
width: 200px; /* Standard-Wert */
}
In unserem Basis-Layout werden die beiden Spalten #col1 und #col2 an den linken bzw. rechten Rand gefloatet. Somit fällt #col3 die Rolle der mittleren Spalte in einem 3-Spalten-Layout zu.
Wie man in der XHTML-Struktur erkennt, sind die einzelnen Spalten nicht ineinander verschachtelt. Vielmehr werden die Randspalten #col1, #col2 und die Spalte #col3 gleichberechtigt innerhalb von #main platziert. Die Randspalten sollten jetzt von allen Inline-Elementen, wie normaler Text, umflossen werden. Ein DIV-Container wie #col3 ist jedoch ein Block-Element. Dieser Container beansprucht daher die gesamte verfügbare Breite für sich. Die beiden Randspalten schweben sprichwörtlich darüber.
Damit das keinen Ärger gibt und sich die Inhalte der mittleren Spalte nicht mit denen der beiden Randspalten überdecken, müssen per CSS entsprechende Vorkehrungen getroffen werden. Für die beiden Randspalten wird eine Standardbreite von 200 Pixeln festgelegt. Mit der Angabe eines 200 Pixel breiten Randabstands (margin) sowie mit der Breitenangabe width:auto;, werden die Inhalte von #col3 in das Korsett zwischen den beiden Randspalten #col1 und #col2 gezwungen. Die hier angegebenen CSS-Deklarationen finden Sie in der Datei: css/main/base.css.
#col3 {
width:auto;
margin-left: 200px; /*
Standard-Wert */
margin-right: 200px; /* Standard-Wert */
}
Hinweis: Die Reihenfolge Spalten #col1, #col2 und #col3 sollte im Quelltext unverändert bleiben. Ordnen Sie ihre Inhalte in der gewünschten Abfolge in die Spalten ein. Die Reihenfolge der Inhalte im Quelltext ist vollkommen unabhängig von der Platzierung der Spalten am Bildschirm. Details dazu erfahren Sie im Abschnitt 4.4: Freie Anordnung und Verwendung der Content-Spalten.
Damit wäre geklärt, wie die drei Spalten #col1, #col2 und #col3 im Quelltext angeordnet sind und wie sie per CSS positioniert werden. Bleibt also die Frage nach dem WARUM?
Warum werden die drei Spalten im Quelltext unverschachtelt innerhalb von #main angeordnet?
Die Antwort auf die Frage folgt im Abschnitt 2.7: Das Clearing der Spalte #col3. Zuvor jedoch folgt zum bessern Verständnis der Materie ein kleiner Einschub zur Funktionsweise von floats.
