Making Elements Float

You can make elements float in a sea of text (or other elements). You can use this technique to create multi-column layouts, to create callout quotes, and more.

To wrap text around elements:

1.	Type float:.
2.	Type left if you want the element on the left and the rest of the content to flow to its right. Or type right if you want the element on the right and the rest of the content to flow to its left.
3.	Use the width property (see page 174) to explicitly set the width of the element.

Figure 11.36. We already pushed the sidebar off to the right, now we'll float the main content in on its left. The navbuttons div will float next to the description instead of just under it.

Tips

• Remember, the direction you choose applies to the element you're floating, not to the elements that flow around it. When you float: left, the rest of the page flows to the right, and vice-versa.

• Non-replaced elements (e.g., text) without an explicit width may not float properly.

• The float property is not inherited.

• For an old-fashioned, deprecated, but well-supported way of flowing text between images, consult Making Images Float on page 96.

Figure 11.37. Note that it's the main div that's floating, not the sidebar. The sidebar simply flows along the right side of the iceberg that is the main div. Note that it wasn't strictly necessary to give the sidebar a big left margin to get the float effect, but unless the main div is exactly the same length as the sidebar, the margin helps maintain that float effect long after the main div is done.