4.6 Column Design
In Section 2.7 we discussed the particulars of the special clearing at the end of the static column #col3.
Of course this does not deliver our ideal genuine equal-length columns, but YAML's method does bring us very close. How close exactly? Let's examine the following two examples.
Important: The column #col3 nearly always needs the value width:auto;! Otherwise Internet Explorer will apply the attribute hasLayout = true (see the article: on having Layout), destroying our careful IE clearing at the end of #col3 by encompassing it.
Background: the static column #col3 is the bearer of the column separators. Without the clearing, the column and thus the lines would not always reach all the way down to the footer.
Example 1 - Column Separators
A common design element is vertical separation lines between the individual content columns. The Faux Columns technique (with background images) is often used to ensure that these lines are always the same length, independent of how full each column container is
When using the column order 1-3-2 and 2-3-1 (see Section 4.4), YAML can create lines without using any background images at all. Instead, we use the CSS border property of the static column #col3. This is possible in these column orders because #col3 is always the longest.
Below is an example of a two-pixel wide dotted line as a column separator for a three-column layout:
#col3 {
border-left: 2px #ddd dotted;
border-right: 2px #ddd dotted;
}
Example 2 - Column Backgrounds
As already mentioned, CSS cannot really construct a “genuine” column layout with floating elements, as the individual columns are always only as high as the contents require. So we need to use a little trick to put background images or colors on those columns. We have chosen the "Faux Columns" technique as it is the most reliable method for producing the desired effect.
We use the fact that all the column containers, whose height varies, are contained within a parent container like #main, which thus automatically expands to the height of the tallest column. So we leave the background of the column containers transparent and assign the desired background image to a container like #main. As CSS 2 can only assign one background image per container, the second column graphic needs a second container. The accompanying examples use .page. And to ensure that the background image from .page (which surrounds #header and #footer) is really only visible in the column area, #header and #footer are assigned solid white backgrounds.
The following example details the simple implementation of this technique. The necessary CSS definitions are in the file basemod_faux_columns.css.
04_layouts_styling/3col_faux_columns.html
Our trick is a bit more involved when using flexible layouts. Assuming you define your column widths in percent, we can still use the Faux Columns technique. It is slightly more complicated because you have to prepare a particular background image so that the CSS positioning works correctly. The article "Faux Colums for liquid layouts" details the technique extensively. The following example shows its use within a three-column layout with embellished side columns.
04_layouts_styling/3col_liquid_faux_columns.html
Note: in earlier YAML versions it was also possible to use the border property of the #col3 container to create a solid column background for the side column. This method is no longer supported in YAML 3.2 and above, as it creates a particular accessibility problem when certain contrast modes are used with Windows.
