Because floated elements are repositioned to allow other content to flow around them, they exhibit unique behavior. This behavior is outlined here:

Each rule is important in determining how floated elements are positioned and rendered. This section examines each rule in depth.

The margins of floated elements never collapse. Consider the diagram in Figure 8-4, which shows how the box model is incorporated when an element has been floated.

Figure 8-4. Figure 8-4

When an element is floated, it takes on the behavior of a block element, with one major difference: Its sizing becomes shrink-to-fit horizontally and vertically. That means that if you float a <div> element, its dimensions change such that it only expands enough to accommodate the content within it. In Chapter 7, you learned that the default dimensions of a <div> element are expand-to-fit horizontally, meaning the <div> takes up the whole line, but not so when a <div> element is floated. Figure 8-5 is an example of how a <div> element changes once floated.

Figure 8-5a. Figure 8-5a

The CSS in Figure 8-5a is included in the markup in Figure 8-5b.

Figure 8-5b. Figure 8-5b

In Figure 8-5c, you see what happens before the <div> with id name fifty-states receives the float: left; declaration. You can see that the <div> is normal at this point; it expands to fill the whole line.

Figure 8-5c. Figure 8-5c

In Figure 8-5d, you see what happens after the <div> with id name fifty-states receives the float: left; declaration; its width has changed. Now the <div> element only expands enough horizontally to accommodate the content inside of it.

Figure 8-5d. Figure 8-5d

In Figure 8-5 you see what happens when a block element is floated, but what about an inline element, such as the <span> element, or the <a> element? This is demonstrated in Figure 8-6.

Figure 8-6a. Figure 8-6a

The CSS in Figure 8-6a is included in the XHTML markup that you see in Figure 8-6b.

Figure 8-6b. Figure 8-6b

In Figure 8-6c, you see what happens prior to applying the float: right; declaration to the <span> element with the id name sailboat.

Figure 8-6c. Figure 8-6c

In Figure 8-6d, you see that after applying the float: right; declaration to the <span> element with id name sailboat. The <span> element becomes a block element with shrink-to-fit width and height. The width and height properties are not applicable to inline elements typically; in this situation, if you were to apply width or height to the <span> as a floated element, it would work, since it is now a block element.

Figure 8-6d. Figure 8-6d

Now that you've had an overview of the float property, the following Try It Out is a recap of what is possible with the float property.

In the next section I present a property that allows you to control floated elements, the clear property.

The peek-a-boo bug can come up in several different contexts — in fact, in far too many to list here. It involves content that disappears and reappears seemingly at random (hence its aptly applied name). The example in Figure 8-10 demonstrates the peek-a-boo bug.

Figure 8-10a. Figure 8-10a

The CSS in Figure 8-10a is combined with the markup in Figure 8-10b.

Figure 8-10b. Figure 8-10b

Figure 8-10c shows that when this document is loaded into IE 6, none of the content beside the floated element is visible until you hover your mouse over a link. Hovering causes the lost content to reappear. If you hover your mouse cursor over the links that have reappeared, you find some of the content disappears again.

Figure 8-10c. Figure 8-10c

Three properties present in the style sheet trigger this bug:

So, with an overview of what causes the peek-a-boo bug and what it is, what do you do to work around the bug? You have more than one option:

The next section continues the discussion of Internet Explorer bugs with the guillotine bug.

The guillotine bug is another aptly named bug where only part of the content disappears. The guillotine bug is demonstrated in the documents in Figure 8-11.

The CSS in Figure 8-11a is combined with the markup in Figure 8-11b.

Figure 8-11a. Figure 8-11a

Figure 8-11b. Figure 8-11b

After you load the preceding in Internet Explorer, when you hover your mouse cursor over the Content Off links, part of the content inside the floating element is chopped off! You can see this in the output in Figure 8-11c.

Figure 8-11c. Figure 8-11c

The guillotine bug occurs when the following conditions are present:

The guillotine bug is yet another bizarre IE rendering bug. The fix is not nearly as elegant as that for the peek-a-boo bug. To fix the guillotine bug, a clearing element must appear after the containing element. The best method to apply this clearing element without affecting the original design is to apply the following rule to the clearing element:

div#clearing {
    clear: both;
    visibility: hidden;
}

Then in the markup, add the clearing element:

<li><a href='#'>Content off.</ax/li>
            </ul>
        </div>
        <div id='clearing'></div>
    </body>
</html>

After you apply this rule and markup, the guillotine bug is corrected without any effects on the intended design. The visibility: hidden; declaration is similar to the display: none; declaration (see Chapter 13 and Chapter 14). The key difference is that an element with display: none; is not rendered and does not appear in a document, whereas an element with visibility: hidden; is rendered, does appear in the document, but is invisible. The easiest way to distinguish between the two is that the display property with a none keyword makes it seem an element doesn't exist at all. If you use the display: none; declaration, properties are not applied and the element takes up no space. If you use visibility: hidden; instead with this declaration, the element still exists; properties are applied, and the dimensions of the element are still honored, even though the element is invisible.

The nest section continues the discussion of IE 6 float bugs with the three-pixel jog.

The next Internet Explorer rendering bug, which also involves floated elements, is called the three-pixel jog. As the name implies, this bug causes 3 pixels of space to appear between text inside an element that follows a floated element and the inner border of that element. This bug is demonstrated by the documents in Figure 8-12.

Figure 8-12a. Figure 8-12a

The CSS in Figure 8-12a is combined with the markup in Figure 8-12b.

Figure 8-12c shows the subtle effects of the three-pixel jog. If you look closely in the screenshot, you can see that the first three lines of the paragraph are 3 pixels farther to the right than the two lines that follow, which corresponds directly to the height of the floated element.

Figure 8-12b. Figure 8-12b

Figure 8-12c. Figure 8-12c

The three-pixel jog doesn't look like much of a big deal, but it can be — especially if a design must be the same, pixel for pixel, in all browsers. The three-pixel jog can be corrected by applying either a width or height (other than auto) to the element that follows the float. Because an explicit width or height is not always desirable, a few methods target IE 6 and less specifically. The first method uses conditional comments like those you saw in Chapter 7.

<!--[if lt IE 7]>
<style type='text/css'>
    P {
        height: 1px;
    }
</style>
<![endif]-->

This is a very clean, acceptable method to target IE 6 for Windows explicitly, and because IE 6 and earlier versions have incorrect support for the height property, the content isn't adversely affected by including this declaration. Other browsers won't be so forgiving, however, so this solution must be applied only to Internet Explorer to avoid complications. The next section continues discussion of Internet Explorer rendering bugs with the double-margin bug.

Here's yet another Internet Explorer rendering bug involving floated elements. The double-margin bug is demonstrated in the documents in Figure 8-13.

Figure 8-13a. Figure 8-13a

The CSS in Figure 8-13a is combined with the markup in Figure 8-13b.

Figure 8-13b. Figure 8-13b

Figure 8-13c shows the double-margin bug in action.

Figure 8-13c. Figure 8-13c

Three ingredients are required to reproduce this bug:

When these ingredients are present, the left margin of the floated element doubles, so Figure 8-13c shows the floated element with 100 pixels of left margin instead of only 50, as is specified in the style sheet. The fix for this bug is very simple. All you need to do is apply a display: inline; declaration to the floated element. If you recall from earlier in this chapter, all floated elements are always block elements. Using the display: inline; declaration somehow tricks IE 6 into correct behavior. Be sure to test this fix with different browsers to ensure that unexpected side effects are not encountered. As is the case with the three-pixel jog, you can target IE 6 specifically by including this declaration within a rule inside of a style sheet that resides in conditional comments.

Within a paragraph, you may need several different types of styles that are only applied to snippets of the text, such as bold or italic fonts. Subscript text is an example of styles that often apply only to a selection of text, rather than to a whole paragraph. Subscript text is text that appears slightly smaller than the text surrounding it and slightly lower than the baseline of the surrounding text. The baseline is the invisible line created for each line of text against which the bottom of each letter is aligned. In other words, the baseline is the line that letters "sit" on. Superscript text, on the other hand, is text raised above the baseline and that appears slightly smaller than the surrounding text. Figure 8-14 is a demonstration of subscript and superscript text.

Figure 8-14a. Figure 8-14a

The CSS in Figure 8-14a is included in the markup document that you see in Figure 8-14b.

Figure 8-14b. Figure 8-14b

The rendered output of the source code appears in Figure 8-14c.

Figure 8-14c. Figure 8-14c

Figure 8-14 shows that the content of the <span> element of the first paragraph appears lower than that of the rest of the line, which is a result of applying the vertical-align: sub; declaration. The figure also shows that the <span> element of the second paragraph appears slightly higher, which is a result of the vertical-align: super; declaration.

The next section continues the discussion of the vertical-align property with top, middle, and bottom vertical alignment text.

The top, middle, and bottom keywords are used to control vertical alignment of selections of text that are slightly smaller than the surrounding text. The top keyword is demonstrated in Figure 8-15.

Figure 8-15a. Figure 8-15a

Combine the style sheet in Figure 8-15a with the markup in Figure 8-15b.

Figure 8-15b. Figure 8-15b

This source code results in the output depicted in Figure 8-15c.

Figure 8-15c. Figure 8-15c

In Figure 8-15c, you see that the <span> element with the contents Top is aligned to the top of the line box. Figure 8-16 demonstrates the middle keyword.

In Figure 8-16, you can see that the middle keyword lines the inline box up relative to the center point of the lowercase letters on the line.

Figure 8-16. Figure 8-16

Figure 8-17 demonstrates the bottom keyword.

Figure 8-17. Figure 8-17

In Figure 8-17, you can see that the inline box is aligned with the bottom of the line box. In the next section, I discuss the text-top and text-bottom keywords.

Like the top, middle, and bottom values, the text-top and text-bottom keywords raise or lower a subset of text. The difference in the text-top keyword as opposed to the top keyword is that the text-top keyword causes alignment to happen with respect to the tallest character of the font of the surrounding text, for instance the lowercase letters t, l, f, or the uppercase letters. Likewise the text-bottom keyword aligns with respect to the lowest character, for instance the letters p, y, or g, which drop below the baseline. The text-top and text-bottom keyword values produce output similar to that produced by the top and bottom keywords. The most important difference between top and text-top is that top causes the border of the inline box to align with the top border of the line containing that inline box, whereas text-top aligns with respect to the tallest character in the font.

The next section discusses percentage and length values as applied to the vertical-align property.

If the selection of keywords I presented in the previous sections weren't enough for you, the vertical-align property also allows percentage and length values to be applied. Figure 8-18 demonstrates the vertical-align property with a value of 300%.

Figure 8-18. Figure 8-18

Percentage values with the vertical-align property are based on the line-height of the element the percentage value is applied to. If you remember back to Figure 8-15b, which shows the markup structure of this document, the <span> element that contains the text 300% has a line-height of 23 pixels. If you recall, I didn't give the <span> element an explicit line-height; I determined the line-height by including the line-height property and increasing or decreasing the value until I achieved the same results that you see in Figure 8-18. To calculate the pixel value of 300%, I take the line-height, 23, and multiply it by 3, to get 69, so the pixel value of 300% in Figure 8-18 is 69px. The default line height differs from browser to browser and between different font sizes, so your own results may vary.

Figure 8-19 demonstrates the vertical-align property with a length of 69 pixels, which should be identical to what you see in Figure 8-18, concerning the placement of the box.

Figure 8-19. Figure 8-19

The vertical-align property has completely different meaning when it is applied to table cells. When applied to table cells, only the baseline, top, middle, and bottom keywords are applicable, and the vertical-align property is used to align the entire contents of the cell. This is demonstrated in Figure 8-20.

Figure 8-20a. Figure 8-20a

Apply the style sheet in Figure 8-20a to the markup in Figure 8-20b.

Figure 8-20b. Figure 8-20b

Figure 8-20c shows the output from this example.

Figure 8-20c. Figure 8-20c

The preceding example is a demonstration of the four vertical-align properties that are applicable to table cells: baseline, top, middle, and bottom. The first two cells are aligned to the baseline. The baseline of a table cell is determined by the baseline of the table row. The baseline of the table row is determined by taking the baseline of the first line of each baseline-aligned table cell in that row. The one with the largest font, or other inline content, such as an image, determines the baseline of the row, which each table cell is aligned against.

In short, this complicated summary of baselining results in the line Lorem ipsum in the first table cell in Figure 8-16c having the same baseline as the word Baseline that appears in the second cell. In this case, the font size of Baseline determines where the baseline of the table row is.

The third cell is top-aligned, which means the content begins at the top of the cell and flows on downward from there. The fourth cell is middle-aligned, which means that the height of the content is measured to determine the middle point of the content, and then that midpoint is aligned with the midpoint of the cell. Finally, the fifth cell is bottom-aligned, which means that the bottom-most point of the content in the cell is aligned with the bottom of the cell.

Although you might expect the vertical-align property to apply to all elements — to block elements, for example, in the same way it is applied to table cells — this isn't the case. The vertical-align property is applicable only to inline elements and table cell elements, <td> and <th>.

The following Try It Out is a recap of the vertical-align property.