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 ...

Get HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.