2.6 How Floats Work
When using floats, it is important to remember that when used in static elements, the CSS property clear: left | right | both does not only affect its own location within the surrounding element, but works globally - on all the floated elements on the page that share the same level in the nesting hierarchy. This is easier demonstrated than explained: please see the file global_clear.html.
Warning: Internet Explorer 5.x and 6.0 will have problems displaying this file. The IE float bugs have not been fixed here. Please try another browser (Firefox, Safari, Opera ...).
Layout Preparation
First we must ensure that floated objects can be used freely within the columns. For this, the eventual content must be completely contained within the static DIVs #col1_content, #col2_content and #col3_content.
For this purpose, these three containers are given the CSS class .clearfix. The Clearfix hack guarantees that all content (static and / or floats) is automatically enclosed. The definition of this class is found in the file base.css.
/* Clearfix Method for clearing the floats */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* This declaration is necessary for Safari!! */
.clearfix { display: block; }
Important: although the class .clearfix is only used on block-level elements in the YAML framework, the Safari browser still needs the explicit declaration of display:block;. Otherwise the container #col3_content becomes much too narrow. This value is redundant for all other modern browsers, like Firefox or Opera.
As you can see, even while using the Clearfix Hack we're still using clear:both;. Within the float columns #col1 and #col2, the clear property only works locally - just how we want it. Within the static container #col3 however, clear:both works globally and ensures that the container #col3_content lengthens to reach the lower edge of the longest float column. This behavior is exactly what the YAML framework requires.
Unfortunately, Internet Explorer up to version 6 cannot deal correctly with the CSS pseudo-class :after. The clearfix method is not completely ineffective in Internet Explorer. It is used within the two containers #col1_content and #col2_content to enclose the content. A couple of adjustments are necessary for IE. These hacks are centrally maintained in the file yaml/core/iehacks.css. For more, see Section 3.5: CSS Adjustments for Internet Explorer.
/*---------------------------------------------------------*/
/* Workaround: Clearfix-Adjustment for all IE Versions | Clearfix-Anpassung für alle IE-Versionen */
/*
** IE7 - x
*/
.clearfix { display: inline-block; }
/*
** IE5.x/Win - x
** IE6 - x
*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*--------------------------------------------------------*/
As Internet Explorer cannot interpret the CSS pseudo-class :after, it ignores the property clear:both; and does not clear globally within #col3. A special DIV container (#ie_clearing) at the end of #col3 is necessary to force IE to clear. A detailed explanation is in the following Section 2.7: The Clearing of #col3.
Note: for a further source of information - especially regarding the technical functioning of floats and in dealing with various browsers - please see the very thorough article "Grundlagen für Spaltenlayouts mit CSS" by Mathias Schäfer on the SelfHTML-Weblog.
Preparing the Content
For the content, yet to come, we need a way to control the text flow within the static container #col3 without triggering the global behavior of clear:both;. Within the floating columns #col1 and #col2, the use of this property is simple, as the clearing here generally only works locally within the columns. Within #col3 , as discussed, the effect is global and would cause large vertical gaps. Unless you can prevent it.
The solution is the overflow method, which also makes the encompassing of floats possible. The overflow method works with the property overflow:hidden, so no conflicts with the clearing of the columns arise. For the preparation of the content, YAML provides the CSS class .floatbox: its use is explained in the following two examples.
The definition of the CSS class .floatbox is in the file base.css.
/* Clearing with overflow */
.floatbox { overflow:hidden; }
IE needs some help with the .floatbox too. Again, this is in the global IE adjustment file iehacks.css (For more see Section 3.5: CSS Adjustments for Internet Explorer).
/* .floatbox adjustment for IE */
* html .floatbox {width:100%;}
The columns can now work with any floated objects. It may be useful to restrict the text flow to a particular area, perhaps to the next section headline. This can prevent graphics from flowing into a following but separate section.
For that, we need to nest the flowing content area, again using the CSS class .floatbox (based on the overflow method). Two examples:
Example 1: a paragraph text should flow around a picture. The surrounding p tag is given the class .floatbox. The text flow is then restricted to this particular paragraph -- no more HTML code is necessary to stop the flow.
<p class="floatbox">
<img src="picture.jpg" style="float:left;" alt="" />
This is the text of the paragraph which flows around the picture...
</p>
<p>Here the text flow has ended. This paragraph always begins below the picture.</p>
Example 2: the text of several paragraphs should flow around a picture. The flow should stop before the next subheading.
The corresponding section is nested in a special DIV container with the class="floatbox". Within this DIV container, objects can be placed at will with float:left; or float:right;:
...
<h2>Subheading 1</h2>
<div class="floatbox">
<img src="picture.jpg" style="float:left;" alt="" />
<p> ... a paragraph ...</p>
<p> ... a second paragraph ...</p>
<p> ... and another paragraph in the flow of text. </p>
</div>
<h2>Subheading 2</h2>
...
The flow of text is restricted to the DIV container by the nesting, and needs no extra HTML code with clear:both; .
