CSS: The Missing Manual, 4th 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 (Wrapping Content with Floating Elements), you can use this property to create a wraparound 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: 25%;
}

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 Specificity: Which Style Wins) with float: none