O'Reilly logo

Dreamweaver CS5: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Float Layout Basics

Float-based layouts take advantage of the CSS float property to position elements side by side and create columns on a page. As you read on Wrapping Text Around an Image, you can float an image to make text wrap around a photograph. But it’s also a powerful layout tool to move a bunch of related page elements (like a list of links that you want to appear in a left-hand column) to one side of the page or the other. In essence, the float property moves a page element to the left or the right. Any HTML that appears after the floated element moves up on the page, and hugs up against the side of the float.

Float is a CSS property, available when you create a CSS style (see Creating Styles for instructions on creating a style). It’s listed in the CSS Rule Definition window’s Box category (see Figure 9-3). Choose the “left” option, and the styled element floats to the left, choose the “right” option and the element moves to the right. For example, if you want to position a sidebar on the left side of a page, you float it to the left.

You have just three options when you want to float an element: left, right, and none. You might never need the “none” option—it simply positions an element like a normal, unfloated element. Since this is the regular behavior of any element, you’d need this option only if you wanted to turn off a float applied by another style (see page 312 for more on how multiple styles can affect the same element).

Figure 9-3. You have just three options when you want to float an element: left, right, and none. You might never need the “none” option—it simply positions an element like a normal, unfloated element. Since this is the regular behavior of any element, you’d need this option only if you wanted to turn off a float applied by another style (see ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required