2.1 A Comprehensive Concept
As the introductory chapter demonstrated, YAML's construction founds on many various considerations, which are most easily explained using the XHTML source code structure. YAML's high flexibility requires a certain amount of complexity, but fear ye not. This and the following chapters explain YAML's basic concept using many examples and source code snippets.
CSS can only be learned and used effectively and precisely when one knows the traps along the way. As in real life, working with CSS is not always easy peasy. Internet Explorer is outstanding in its field as far as the number of CSS bugs it contains -- creating headaches for both beginners and professionals. But no pain, no gain -- in spite of these bugs, you'll see that even Internet Explorer can be maneuvered into displaying accurate, modern, accessible CSS layouts.
This documentation will not merely explain YAML's use in standard-conform browsers, but when necessary includes explanations of Internet Explorer's particular problems and their possible solutions. That's my idea of a comprehensive concept.
Let us begin...
2.2 The Basics: Floats
If an element (a picture or a table) is declared to be a floated object, it is released from the normal text flow and the following elements flow around it, as if it were an obstacle in a stream. This type of positioning only requires the left-aligning or right-aligning of the element (with float:left; or float:right;) within the available space. The browser places the rest of the content around the floated object.
Note: you are advised to read up on the theory of floats in order to better understand their functioning. I highly recommend the article "Float: The Theory" by Big John of positioniseverything.net. "Floats: Die Theorie" is the German translation by Andreas Kalt and Jens Grochtdreis.
Flexible layouts and columns with flexible widths are particularly amenable to floated objects embedded in the text, as the browser can then optimally place line breaks and content within the column.
The text flow is stopped with the CSS property clear:value; (description). Unfortunately, as the W3C has currently defined text flow, it cannot be automatically stopped at the end of the current paragraph or the next subheadline.
Stopping the text flow thus usually requires additional and optically visible HTML code. The use of empty p or hr tags is widespread, but this is certainly not practical.
<p style="clear:left;"> </p>This is particularly disadvantageous for layouts, as those additional code elements are still displayed by the browser as unintentional vertical space.
The precise use of CSS lets us avoid this problem and makes floated environments practical for layout design. In spring 2005, several web designers devoted themselves to this topic and published interesting ideas.
Two of these markup-free clearing methods are used in YAML. Both methods are explained in the following section (the right column).
2.3 Markup-Free Clearing
Effective use of floats was always very complicated, as extra code / markup was necessary to end the flow of text -- often in the form of inline CSS. Floats were thus primarily used for only the simplest layout tasks, such as arranging images.
The expanded capability of CSS 2 and CSS 2.1 and the current good browser support, the applications for floats are endless. The key is the markup-free clearing via CSS.
Method 1: Clearfix
The Clearfix Method is from Big John's article "How To Clear Floats Without Structural Markup", which thoroughly explains Tony Aslett's [ csscreator.com ] clearing method. A German translation of this tutorial is available here.
/* Clearfix-Hack */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
IE 7 requires a minor adjustment, which is explained in the article "New clearing method needed for IE7?"
Method 2: Overflow
A further and most importantly very simple method was pointed out by Paul O'Brien, and is thoroughly explained in the article Simple Clearing of Floats. The surrounding DIV is given the CSS property overflow:auto;. This method has proven to very robust, particularly in the nesting of floats within the content columns.
The value auto, however, can lead to unwanted scrollbars on the edges of the surrounding container. To avoid this, the YAML framework uses overflow:hidden;, preventing scrollbars.
/* Clearing with overflow */
.floatbox { overflow: hidden; }
More information on this topic in Section 2.6: How Floats Work.
Why Two Clearing Methods?
A fair question, with a clear-cut answer. Although both methods in principle lead to the same result - the parent element surrounding the float - the way they do it, technically, is different.
Depending upon the final position of the CSS property clear, it may globally affect the entire layout or only locally, inside a parent container. An exact description is found in Section 2.6: How Floats Work.
The overflow version is used in locations where the clearfix version would have undesirable effects (i.e.: global effect of the clear property).
