2.7 The Clearing of #col3
The previous section explained the global behavior of clear:both; and its effects within the static container #col3. Though this effect would be counterproductive for the position of content within #col3, YAML specifically exploits this effect to consistently make #col3 the longest column in the layout -- independent of the amount of content in the other columns.
The goal of these efforts is to use the CSS border property of #col3 to create vertical column separators (solid, dashed, or dotted lines) or even solid color column backgrounds for the float columns without using graphics. Because of the global clearing, these will always reach to the #footer. This provides an alternative method of designing the graphic layout, which is also extremely easy to edit.
Global Clearing Makes #col3 the Longest Column
How does #col3 become the longest column? In all modern browsers (Mozilla, Firefox, Opera etc.), this happens without any further ado. As #col3 is a static container, the clearing of #col3_content via the clearfix class works globally and forces #col3 to stretch to the lowest end of the longest float column. More on the functioning of the clearfix class in Section 2.6: How Floats Work.
Special Clearing Solution for Internet Explorer
The global clearing via clearfix does not work in IE, as it does not recognize the CSS pseudo-class :after, which contains the property clear:both; . Additional HTML must be added to the end of #col3 to contain it again: this is done with an invisible DIV.
...
<!-- IE column clearing -->
<div id="ie_clearing"> </div>
...
Let us take a close look at this invisible DIV. As mentioned, this container is only required for IE. For modern browsers, it is turned off completely. The necessary declarations are in the file base.css in the folder yaml/core/:
/* IE-Clearing: ... */
#ie_clearing { display: none; }
The adjustments in the properties of this particular clearing DIV for IE are in the file iehacks.css in the yaml/core/ folder:
#ie_clearing {
display:block; /* DIV made visible */
\clear:both; /* Normal clearing for IE5.x/Win */
width: 100%; /* IE Clearing with 100% DIV for IE 6 */
font-size:0;
margin: -2px 0 -1em 1px; /* IE clearing with extra-large DIV for IE7 */
}
* html { margin: -2px 0 -1em 0; }
#col3_content { margin-bottom: -2px; }
/* (en) avoid horizontal scrollbars in IE7 ... because of negative margins*/
html { margin-right: 1px; }
* html { margin-right: 0; }
/* (en) Bugfix: Essential for IE7 */
#col3 { position:relative; }
IE Clearing in Internet Explorer 5.x
display:block turns the DIV on. Then the actual clearing begins: with \clear:both. The leading backslash exploits the IE 5.x and 6.0 parser bug, which ensures that the property will only be understood by Internet Explorer 5.x.
Important: this is the standard method for clearing float environments. Unfortunately a particularly tricky bug turns up in Internet Explorer v5.x to v7, which under certain circumstances can lead to the collapsing of the left margin of #col3. More information on this in Section 5.3: Known Problems - Internet Explorer. This bug cannot be fixed in IE 5.x, so the regular clearing is still used for this browser version.
For Internet Explorer 6 and 7, we use a special clearing method, which prevents the bug from appearing.
IE Clearing in Internet Explorer 6.0
This clearing solution bases on the fact that Internet Explorer will only clear #col3 beneath the float columns when it contains an oversized element. The DIV container #ie_clearing is defined with width: 100% in IE6 to force this. As the float columns will always limit the remaining space to less than 100 percent, the container must break under the float columns.
IE Clearing in Internet Explorer 7.0
IE7 needs a box with a width of over 100 percent. The container, therefore, also needs an additional left margin of 1 pixel (margin: -2px 0 -1em 1px). But Internet Explorer 7 has a bug that makes this overlapping pixel - which has no significance for the layout - to cause horizontal scrollbars when used with full-page layouts (body, .page_margins and .page at 100% width and no border). To avoid this, the HTML element html receives a 1 pixel wide margin on the right side.
/* Avoiding horizontal scrollbars for layouts with too-large content in IE7*/
html {margin-right: 1px}
* html {margin-right: 0}
This trick prevents horizontal scrollbars and the extra 1 pixel wide edge next to the vertical scrollbar in IE7 is usually not even noticed.
Now one more helpful hint for Internet Explorer 7. The container #col3 has to be assigned the property position:relative. Without it, Internet Explorer 7 would ignore the container #ie_clearing.
Hiding Clearing Containers in Layouts
The margins in the other directions margin: -2px 0 -1em 1px are only to make the container optically invisible in all IE versions. To make it definitively invisible, the font size was set at 0. The height of the container then shrinks to 2 pixels. These last two pixels are then canceled out by a further negative margin in #col3_content. Now the DIV container is not visible in the layout, and yet still fulfils its functions.
One last adjustment is necessary. The IE clearing only works as long as the column #col3 is not given the proprietary property hasLayout. bekommt. Yet exactly that is called for when, for example, removing the 3 pixel bug (see Section 3.5: CSS Adjustments for Internet Explorer). In this case, the column dividers cannot be used. Still, the columns must be cleared correctly, in order to place the footer beneath them. This is done easily by also giving the container #footer in the file base.css the property clear:both;.
Graphic-Free Column Divider
Done: now we can use the CSS property border of #col3 to separate it from adjacent columns #col1 and #col2 with vertical column dividers, which go all the way down to the footer. All without a single graphic. As an example, we can construct a vertical dotted line:
#col3 {
border-left: 2px #eee dotted;
border-right: 2px #eee dotted;
}
You want proof that it works? Here you go:
/examples/04_layouts_styling/3col_column_dividers.html
A detailed description of this example can be found in Section 4.6: Designing the Columns.
Note: the use of this technique is only recommended in combination with a column setup with #col3 in the middle, i.e. 1-3-2 and 2-3-1 or when using two column layouts. More information on variable column order is found in Section 4.4: Variable Column Order.
When using the column order 1-2-3 / 3-2-1 or 2-1-3 / 3-1-2, this technique is not so useful, as IE will not stretch #col3 to the height of the longest float column. With these layout variants, please use the "Faux Columns" technique for defining vertical column dividers.
This closes the explanation of the structure of YAML's XHTML source code and the functions of the IE clearings. The foundation is set. The last bit of the source code structure is the Skip-Links, which are explained in the following section.
