CSS3: The Missing Manual, 3rd Edition

Chapter 13. Building Float-Based Layouts

Float-based layouts take advantage of the float property to position elements side by side and create columns on a web page. As described in Chapter 7 (page 220), you can use this property to create a wrap-around effect for, say, a photograph, but when you apply it to a <div> tag, float becomes a powerful page-layout tool. The float property moves a page element to one side of the page (or other containing block). Any HTML that appears below the floated element moves up on the page and wraps around the float.

The float property accepts one of three different values—left, right, and none. To move an image to the right side of the page, you could create this class style and apply it to the <img> tag:

.floatRight { float: right; }

The same property applied to a <div> tag full of content can also create a sidebar:

.sidebar {
  float: left;
  width: 170px;
}

Figure 13-1 shows these two styles in action.

Note

The none value turns off any floating and positions the element like a normal, unfloated element. It’s useful only for overriding a float that’s already applied to an element. You may have an element with a particular class such as .sidebar applied to it, with that element floating to the right. But on one page you may want an element with that class to not float, but to be placed within the flow of the page, like this Note box. By creating a more specific CSS selector (see Adding Styles for Tablet Screens) with float: none, you can prevent that element ...