6.1. More on Positioning Page Blocks

6.1.1. The float Property

One of the most interesting and often-used CSS properties is the float property . It takes a value of left, right, or none (though none is the default and is rarely used). This property, when set to left or right, forces the element to float outside of its natural position in the containing box, aligned either to the left or the right, respectively. Subsequent content wraps around the element. It can be used in any block element.

Two frequent uses of the float property are to create drop-cap designs, and flow text around images. To create a drop-cap effect using the float property, define a <span> element whose float property is set to left^[1]. The font-size property is set to some multiple of the default, generally using the ems metric (e.g. a font-size of 2.5em will make the drop-cap two-and-a-half lines high). For example, this HTML fragment will produce the output shown in Figure 6-1.

^[1] CSS purists will prefer simply to assign the properties to the :first-letter pseudo-element of the paragraph; however, that pseudo-element is not supported by older browsers, so we use a more compatible method here.

<p><span style="color: blue; font-size: 2.5em; float: left;
   padding-right: 2px;">M</span>Making the first letter much
   larger than the rest of the text in a paragraph and floating
   it left produces the drop-cap effect shown here. Text will
   wrap around the dropcap letter for as many lines as it takes
   to create a smooth flow. Try adjusting the width of your
   browser window and notice the effect it has on the amount of
   text that wraps under the big blue "M" at the beginning of
   this paragraph.</p>

I could have achieved the same effect in a more repeatable way by defining a CSS class called dropcap as shown in this fragment:

.dropcap {
  color: blue;
  font-size: 2.5em;
  float: left;
  padding-right: 2px;
}

Then I could redefine the span encompassing the drop-cap as shown here:

<p><span class="dropcap">M</span>aking the first letter much
   larger than the rest of the text in a paragraph and floating
   it left produces the drop-cap effect shown here. Text will
   wrap around the dropcap letter for as many lines as it takes
   to create a smooth flow. Try adjusting the width of your
   browser window and notice the effect it has on the amount of
   text that wraps under the big blue "M" at the beginning of
   this paragraph.</p>

The float property is designed to replace the align attribute associated with img tags in HTML, and has, for all practical purposes, precisely the same effect. The align attribute is deprecated in favor of the float property in recent releases of HTML recommendations from the W3C. The following HTML fragment uses the float property to produce the result shown in Figure 6-2.

<p><img src="images/logo.gif" alt="Footbag Freaks Logo"
   width="153" height="92" style="float: left;" />The Footbag
   Freaks logo appears to the left of this paragraph. Depending
   on whether I use the CSS float property, I will or will not
   see more than one line of text appearing next to the logo.
   The CSS float property replaces the deprecated align
   attribute of the HTML "img" tag and has essentially identical
   effect.</p>

The float property has two key advantages over the align attribute in HTML. First is that float can be applied to other HTML elements than images (as demonstrated with the drop-cap example above). Secondly, using the float property allows you to create a CSS component to which you can then apply other property-value pairs. The float property is thus far more flexible than the old align attribute.

6.1.2. The clear Property

There are times when you want text or other objects to flow around an image up to a point, and then be placed so that the flowing content is guaranteed to appear below the image. For example, if you had a reference to "the above figure," it would confuse your readers if the text wrapped in such a way that this reference displayed to the right of the image.

Achieving this kind of controlled flow is the purpose of the clear property. In HTML, you can use the clear attribute in a <br> tag to achieve this, but as the use of that attribute is no longer considered "good practice", use the clear CSS property instead. One big advantage of clear in CSS is that it can be used in many more places than the confines of HTML's <br> tag.

The clear property can have any of four values: left, right, both, or none, Again, none is the rarely specified default. To demonstrate this property, first we'll create a slight variation on the HTML in the preceding section that flowed text around images. Divide the text into two paragraphs as shown below; the new tags are bolded in the following fragment.

<p><img src="images/logo.gif" alt="Footbag Freaks Logo"
   width="153" height="92" style="float: left;" />The Footbag
   Freaks logo appears to the left of this paragraph.
   Depending on whether I use the CSS float property, I will
   or will not see more than one line of text appearing next
   to the logo.</p>
						<p>Without the CSS float property, designers have typically
   become accustomed to using tables to create situations
   where more than one line of text can appear to the
   immediate right of an image such as this one. That approach
   has numerous disadvantages.</p>

This fragment produces the layout shown in Figure 6-3. I've narrowed the width of the window a little, to dramatize the effect.

Modify the HTML one more time by adding a clear property to the second <p> tag as shown in bold below. This produces the result shown in Figure 6-4.

<p><img src="images/logo.gif" alt="Footbag Freaks Logo"
    width="153" height="92" style="float: left" />The Footbag
  Freaks logo appears to the left of this paragraph.
  Depending on whether I use the CSS float property, I will
  or will not see more than one line of text appearing next
  to the logo.</p>
<p style="clear: left;">Without the CSS float property,
  designers have typically become accustomed to using tables
  to create situations where more than one line of text can
  appear to the immediate right of an image such as this one.
  That approach has numerous disadvantages.</p>

Notice that the text of the second paragraph does not wrap awkwardly back under the image on the left. clear: left forces the paragraph to appear after any elements floating in the left margin. Similarly, clear: right makes sure the right margin is clear of floating elements, and clear: both will clear both margins.

A convenient example of float and clear working together can be useful in laying out simple forms. Consider the following form code:

<form action="test.php" method="post">
<p>This is a form.</p>
<p><label for="name">Name:</label>
   <input type="text" id="name" name="name" size="30" /></p>
<p><label for="address">Address:</label>
   <textarea id="address" name="address" wrap="soft" cols="30"
     rows="5"></textarea></p>
<p><label for="country">Country:</label>
   <select id="country" name="country">
     <option>United States</option>
     <option>Canada</option>
     <option>Australia</option>
     <!-- More countries… -->
   </select></p>
<p><input type="submit" /></p>
</form>

Because of the simple code here, the fields are a bit of a jumble, as you can see in the first screenshot in Figure 6-5. Most form layouts rely heavily on tables to keep everything neatly lined up. But by applying a little CSS to this page, we can make even our simple form look great:

form p {
  width: 400px;
  clear: both;
}
form p label {
  float: left;
}
form p input, form p textarea, form p select {
  float: right;
}

We assign a comfortable width of 400 pixels to all paragraphs appearing within forms, and then float labels to the left, and form fields to the right of those paragraphs. The clear property we assigned to our paragraphs ensures that each appears below the form fields that float against the sides of the paragraph before it. The result is shown in the second screenshot in Figure 6-5.

This is a powerful example of how tasks for which we've come to use tables out of habit can actually be more easily (and quickly!) achieved with CSS.