We're already used to seeing floating images and tables on Web pages. Simply use the ALIGN=left attribute on an <IMG> tag, for example, and text will flow around the right side of the floating image. Stylesheets have a somewhat more flexible syntax for floating elements, which is what this page is all about.

(I'm sorry to report that Internet Explorer 3 doesn't support anything on this page. IE 4 and 5 can be a bit buggy too.)

float

The float property enables you to flow text around an element, including not just images but any block-level text as well.

H4 { float: left }

This text is floating left.

To the left you can see this CSS rule applied to some <H4> text. This paragraph simply wraps around it, much like you'd expect text to wrap around an image aligned left. Of course, you can also use a value of right.

If your browser doesn't support this CSS property, click here to see what it looks like.

If the floating element has too little space around it, you can add padding with one of the properties we discussed earlier in this lesson. (For some reason, using margins seems to cause trouble.)

clear

What if you want to wrap one paragraph around a floating element but make sure the next paragraph doesn't wrap? Use the clear property, much like you'd use the CLEAR attribute in HTML (for example: CLEAR=right).

P { clear: left }

This is one paragraph that is wrapping around an image that's floating left.

This is another paragraph. Without any clear property, it also wraps, as you can see.

And here's what happens if we use clear:

This is one paragraph that is wrapping around an image that's floating left.

This is another paragraph. Now I've set clear: left, so the browser makes sure that the left side is clear of all floating elements before it displays the paragraph.

You can also use values of right and both.

If your browser doesn't support this CSS property, click here to see what it looks like.

Congrats, you've made it through the bulk of Lesson 3. Let's walk the walk.