2.5 Reihenfolge der Spalten-Container im Quelltext
Beide Spalten #col1 und #col2 sind float-Umgebungen. Bei der dritten Spalte #col3 handelt es sich um einen statischen Container. Die Reihenfolge, in der diese drei Container im Quelltext erscheinen, ist daher nicht beliebig wählbar. Die float-Objekte (#col1 und #col2) müssen sich im Quelltext immer vor dem statischen Objekt (dem Container #col3) befinden.
Die CSS-Deklarationen der float-Spalten finden sich in der Datei yaml/core/base.css:
#col1 {
float: left;
width: 200px; /* Standard-Wert */
}
...
#col2 {
float: right;
width: 200px; /* Standard-Wert */
}
Im Basis-Layout werden die beiden Spaltencontainer #col1 und #col2 an den linken bzw. rechten Rand gefloatet. Somit fällt #col3 die Rolle der mittleren Spalte in diesem dreispaltigen Grundaufbau zu.
Wie man in der XHTML-Struktur erkennt, sind die einzelnen Spalten nicht durch zusätzliche Container (oft als wrapper bezeichnet) verschachtelt. Alle drei Spaltencontainer befinden sich innerhalb von #main auf einer Strukturebene. Die beiden float-Spalten befinden sich jedoch außerhalb des normalen Elementflusses. Der statische Container #col3 beansprucht daher die gesamte verfügbare Breite für sich. Die beiden Container #col1 und #col2 schweben sprichwörtlich darüber.
Damit das keinen Ärger gibt und sich die Inhalte von #col3 nicht mit denen der beiden float-Spalten überdecken, müssen per CSS entsprechende Vorkehrungen getroffen werden. Für die float-Spalten wird im Basislayout eine Standardbreite von 200 Pixeln festgelegt. Mit der Angabe eines 200 Pixel breiten Außenabstands (margin) sowie mit der Breite width:auto; für #col3, werden die Inhalte von #col3 in das Korsett zwischen #col1 und #col2 gezwungen. Die hier angegebenen CSS-Deklarationen finden Sie in der Datei: yaml/core/base.css.
#col3 {
width:auto;
margin-left: 200px; /* Standard-Wert */
margin-right: 200px; /* Standard-Wert */
}
Wichtig: Die Reihenfolge Container #col1, #col2 und #col3 sollte im (X)HTML-Quelltext unverändert bleiben. Ordnen Sie ihre Inhalte in der gewünschten Abfolge in die Spaltencontainer ein. Die Reihenfolge der Inhalte im Quelltext ist vollkommen unabhängig von der Darstellung der Spalten auf der Webseite. Details dazu erfahren Sie im Abschnitt 4.4: Freie Anordnung und Verwendung der Content-Spalten.
Damit wäre geklärt, wie die drei Container #col1, #col2 und #col3 im Quelltext angeordnet sind und wie sie per CSS grundlegend positioniert werden. Bleibt also eine Frage: Warum werden die drei Spalten im Quelltext unverschachtelt innerhalb von #main angeordnet?
Die Antwort darauf 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.
