2.5 Column Order in the Source Code
Both columns #col1 and #col2 are floats. The third column, #col3, is a static container. The order in which these three containers appear in the source code is not variable. The float objects (#col1 and #col2) must always come before the static object (the container #col3).
The CSS declarations of the float columns are in the file yaml/core/base.css:
#col1 {
float: left;
width: 200px; /* Standard value */
}
...
#col2 {
float: right;
width: 200px; /* Standard value */
}
The basic layout floats the two column containers #col1 and #col2 to the left and right edges, respectively, leaving #col3 to appear in the middle of this three-column layout.
As you can see in the XHTML structure, the individual columns are not nested in additional containers (often called wrappers). All three column containers are within #main in the same structural level, but both floated columns #col1 and #col2 are completely cut out of the normal element flow. The static container #col3 then takes up the entire available width between them.
CSS must still specify a few more things so that the content in #col3 will not conflict with that in the two float columns. The float columns are set to a standard width of 200 pixels. A 200 pixel wide outer margin on #col3 in combination with its width:auto; forces its content into the alley between the content of #col1 and #col2. The CSS declarations described here are in the file: yaml/core/base.css.
#col3 {
width:auto;
margin-left: 200px; /* Standard value*/
margin-right: 200px; /* Standard value */
}
Important: the order of containers #col1, #col2, and #col3 should remain unchanged in the (X)HTML source code. Sort your content into column containers in the desired order. Their sequence in the source code is completely independent of their display order on the screen. Details are available in Section 4.4: Variable Order and Use of Content Columns.
Now we've got the three containers #col1, #col2 and #col3 set up in our source code and positioned with CSS. Only one question left: why are these three columns not nested inside #main?
The answer is in Section 2.7: The Clearing of Column #col3. Before we get to that, a small detour along the way to visit float functionality.
