Section 7.6. Wrap Content with Floating Elements | Dreamweaver CS3: The Missing Manual

7.6. Wrap Content with Floating Elements

HTML normally flows from the top of the browser window down to the bottom, one headline, paragraph, or block-level element on top of another. This word processorlike display is visually boring (Figure 7-12, top), but with CSS, you're far from stuck with it. You'll learn lots of new methods for arranging items on a Web page in Part 3, but you can spice up your pages plenty with one little CSS property float .

The float property moves an element to either the left or right. In the process, content below the floated element moves up and wraps around the float (Figure 7-12, bottom). Floating elements are ideal for moving supplemental information out of the way of the main text of a page. Images can move to either edge, letting text wrap elegantly around them. Similarly, you can shuttle a sidebar of related information and links off to one side.

Figure 7-12. The regular flow of HTML is left to right, top to bottom, with one block-level elementheadline, paragraph, <div>, and so onstacked on top of the next . By letting you break up this uniformity , the float property is one of the most powerful and useful tools that CSS offers. Its uses range from simply moving an image to one side of a paragraph to providing complete layout control over banners, sidebars, navigation bars, and other page elements.

While you can use floats in some complex ( and confusing) ways, as you'll see in Chapter 11, the basic property is very simple. It takes one of three keywords, left, right , or none , like so:

 float: left;

left . Slides the styled element to the left, while content below wraps around the right side of the element.
right . Slides the element to the right.
none . Turns off the float and returns the object to its normal position.

Note: Floating an image is similar to setting the <img> tag's align attribute to either left or right . That little bit of HTML is deprecated (Section 3.3), so use the CSS float property instead.

Floated elements move to the left or right edge of the browser window, or of their containing element , if there is one. You may have a box on the page that's 300 pixels wide and is itself floated to the right edge of the browser window. Inside that box, you've got an image that floats to the left. That image slides to the left edge of that 300 pixel-wide boxnot the left edge of the browser window.

You can even use the float property with an inline element (see Section 7.2.4) such as the <img> tag. In fact, floating a photo to the left or right using CSS is a very common use of the float property. A Web browser treats a floated inline element just like a block-level element, so you don't run into the problems with padding and margin that normally trouble inline elements (see Section 7.2.4).

You can also float a block-level element like a headline or paragraph. A common technique's to float a <div> tag containing other HTML tags and page content to create a kind of containing box. In this way, you can create sidebars, pull quotes, and other self-contained page elements. (You'll see an example of this in this chapter's tutorial.) When you float block-level elements, it's a good idea to set the width property as well. This way, you can control how much horizontal space the block takes up and how much space is available for the content below it to move up and wrap around the block.

Note: The source order the order in which you write your HTMLhas a big impact on the display of floated elements. The HTML for the floated tag must appear before the HTML of any content that wraps around the floated element. Say you've created a Web page composed of an <h1> tag, followed by a <p> tag. Toward the end of that <p> tag, you've also inserted a photo using the <img> tag. If you float that photo to the right, say, then the <h1> tag and most of the content inside that <p> tag will still appear above the photo; only content that follows the <img> tag will wrap around the left side of the image.

7.6.1. Backgrounds, Borders, and Floats

To the consternation of many Web designers, backgrounds and borders don't float the same way as other page elements. Say you float an elementa sidebar for exampleto the right. The content below the sidebar moves up and wraps around it, just as it should. But if that content has a background or border set on it, then that background or border actually appears underneath the floated sidebar (Figure 7-13, left). In essence, a Web browser wraps the text around the float, but not the border or background. Believe it or not, this is absolutely kosher, and how (according to the rules) it's supposed to work. Of course, you may not want to follow these rules; you might want to have the border or background stop when it reaches the floated element (Figure 7-13, right). With a little CSS magic, you can do it.

First, you need to add one rule to the style that has background or borders running underneath the float. Once you locate the style, add this line: overflow: hidden ;. The overflow property (discussed in more detail in Section 7.5.2) makes any background or border that extends underneath the float disappear.

Another approach is to add a borderline around the floated element; when you make the borderline thick enough and match its color to the background color of the page, the border looks just like empty spaceeven though it's covering and hiding the background color and borderlines that are extending below it.

Figure 7-13. In this example, there's an <h1> tag with a background color and an <h2> tag with a border (left). Adding overflow: hidden; to the style for the <h1> tag (right) prevents the headline from appearing under the floating element (sidebar).

7.6.2. Stopping the Float

Sometimes you need a way to tell a tag to ignore a floated element. You may have a copyright notice that should always appear at the bottom of the browser window. If you have a particularly tall sidebar that's floated to the left side of the page, the copyright notice might actually be drawn up the page and wrap around the float. Instead of appearing at the bottom of the page, the copyright is sitting up the page next to the sidebar. You want the copyright notice part of your page to refuse to wrap around the floated element and instead drop below it.

Other problems occur when you have several floated items close together. If the floated items aren't very wide, they float up and next to each other, and if they're of varying heights they can get into an unattractive logjam (see Figure 7-14, top). In this case, the floated elements shouldn't float next to each other. CSS provides the clear property for just these types of problems.

BROWSER BUG
When overflow: hidden Fails

The overflow: hidden property prevents backgrounds and borders from awkwardly running under floating elements (Figure 7-13). But nothing's ever that simple in the world of Web browsers. While this one line of code works for Internet Explorer 7, Firefox, Camino, and Safari, it doesn't work reliably in Opera (at least version 8.5), and Internet Explorer 5 and 6 for Windows just ignore it.

Alas there's no apparent fix for Opera, but there's something you can do for IE 5 and 6. For those browsers, you need to add one additional rule: zoom: 1 ;.

This is a Microsoft-only property that lets you enlarge an element on a page. In this case, though, it's just a weird way to force IE 5 and 6 to stop a border or background from extending underneath the floated element. (For more detail on why this zoom thing works, see "Got Layout?" in Section 11.1.)

You may want to put the IE-specific zoom rule in an IE-only style (see the box in Section 7.6). You can even put it in a completely separate IE-only external style sheet (Section 14.5.2).

You'll also find an example of this problem and its solution in the tutorial starting in Section 7.7.5.

The clear property instructs an element to not wrap around a floated item. By clearing an element, you essentially force it to drop down below the floated item. Also, you can control which type of float (left or right) is cleared or force a style to simply ignore both types of floats.

The clear property accepts the following options:

left . The style will drop below elements that are floated left but will still wrap around right-floated objects.
right . Forces a drop below right-floated objects but still wraps around left-floated objects.
both . Forces a drop below both left- and right- floated elements.
none . Turns off clearing altogether. In other words, it makes an item wrap around both left-and right-floated objects, which is how Web browsers normally work.

In the case of a copyright notice that must appear at the bottom of the page, you'd want it to clear both left-and right-floated objectsit should always be below other content and should never wrap to the left or right of any other item. Here's a class style that would do just that:

 .copyright {     clear: both; }

Figure 7-14 shows how the clear property can prevent floated items of varying heights from clumping together. All three photos in that figure have a right float applied to them. In the top figure, the photo of the tomatoes (1) is the first image on the page and appears at the far right edge. The second image (2) obeys the float set on the first image and wraps up to the left of it. The last photo (3) isn't wide enough to sit next to the second photo (2) but still tries to wrap around both (1) and (2). It gets stuck in the process.

Using clear: right ; on the images prevents the photos from sitting next to each other (Figure 7-14, bottom). The clear applied to the second photo prevents it from wrapping up next to the first image, while the last image's right clear property forces it to appear below the second image.

Figure 7-14. Top: Sometimes you don't want an element to wrap around a floated object.
Bottom: Applying the clear property (in this case clear: right;) to each image prevents them from sitting next to each other. The clear applied to photo (2) prevents it from wrapping up next to image (1). Applying clear: right to photo (3) forces it to appear below photo (2).

Tip: This business of left floats, right floats, and how to clear them sounds complicatedand it is. This section gives you a basic introduction. You'll see the subject again in Chapter 11 and eventually learn how to use floats in more sophisticated ways.