Some hints on using floating for HTML layouts?

Layout means, using the “float:” attribute to position whole columns and large elements that will contain text etc..

First rule: use the “clear: both;” CSS attribute only after all content in the HTML source. Because it affects not just the floating happening in the current div, but enforces positioning below all elements that have a “float:” CSS attribute (i.e. below the one reaching most into the document). If no text follows, this is no harm, and is used to extend the height of the floating divs to the height of the ones with the “float:” attribute.

As you cannot use any “clear:” attribute within the document, you need another means to stop positioning elements from left to right and again position them below each other. The good thing is, this is done automatically: block level elements like divs that contain no explicit width setting (other than 100%) use up 100% of the available space, not allowing other elements to be to their left of right. Only if giving them also a “float:” attribute, their width is just as wide as their content. So in the following example, you have two columns:

<div style="float:left; height: 100px;">column 1 (as wide as its content)</div>
<div>column 2 (as wide as space is available)</div>
<div>also in column 2, not a column 3</div>

Now how do you position more than two elements next to each other? By setting the “float:” attribute on them also. A “float:” attribute only means to allow one other block-level elements on either the right side (for “float:left;”) or the left side (for “float:right;”). If that floating block-level elements does not consume all the available space, the “float:” attribute setting does not (!) cause to fill the remaining space with other block-level elements. For that to happen, for one more block level element on the side, the floating elements must allow to be floated, too, by repeating the “float:” attribute setting. So you can create three columns like this:

<div style="float:left; height: 100px;">column 1 (as wide as its content)</div>
<div style="float:left;">column 2 (as wide as its content)</div>
<div>column 3 (as wide as possible)</div>

But not like this:

<div style="float:left; height: 100px;">column 1 (as wide as its content)</div>
<div width="100px;">column 2 (as wide as its content)</div>
<div>column 3 (as wide as possible)</div>

Because float elements are out of the normal element flow, a “height:100%” setting does not make them as heigh as their parent. If you want to achieve that effect anyway (e.g. to extend the background of side columns to the height of the content column), you need to use the “nested divs” layout of CSS Zen Garden, which goes like this (for three columns):

<div id="level1_leftrightcenter">
  <div id="level2_left" style="float:left;">left column content</div>
    <div id="level2_rightcenter">
      <div id="level3_right" style="float:right;">right column content</div>
      <div id="level3_center">
        <div id="level4_center">center column content</div>
      </div>

    <br style="clear:both;" />
 </div>

Note that the content column is the only one without a “float:” setting. This is to ensure that its width is as wide as possible (resulting in a variable width layout), instead of being as wide as its content (as when applying the “float:” attribute). Note also that all content of the center column is in another “level4_center” div; if there would be direct text content or more than one block element in the “level3_center” div, text could appear below the “level3_right” div due to floating, but this way it will always be to its left, as the “level4_center” div starts left of the “level3_right” div and, as a block level element, has a rectangular shape.

Also note that the values of the “float:” and “clear:” attributes are badly named:

• “float:left;” actually means “this element is on the left side, allowing to be floated on the right side”, which is counterintuitive
• “float:right;” for “allow to be floated on the right side” would be better.
• “clear:left;” means: “clear the effect of any float:left setting for this and following elements”. It would have been better to name this “floating:right;” (to allow only to be a floating element on the right side) resp. “floating:none;” (the equivalent of “clear:both;”).

Also, it would be better to have the “clear:” attribute only apply to floating within the containing block, not to the whole document.