Text alignment with pictures

Question

I have an image on my webpage in which I want to have text wrapped on the right of it so I have some CSS like:

.image {
  float:left
}

But after reaching a certain point in the text, I want to make sure the text no longer appears to the right of the image, I want it below the image. What tag can I use to break the text onto a new line below the image?

Answer 1

Wrap the text you want to appear below the image in a container element with a style clear: left applied to it.

The Floats section of the CSS specification has more details about this, including a nice example illustrating how the clear property works.

Answer 2

Have the text in a div with the following styles

{ float:left; clear:left; }

The next object will appear below and to the left.

Answer 3

I believe you want to be able to define how much free space is below the image. Try adjusting margin-bottom of the image:

 IMG  text text text
 IMG  text text text
         text text text
         text text text
 text text text text
 text text text text

This way all the text may be in the same paragraph. And it will wrap around image nicely.

Then put an element with clear:both; style to disable wrapping after the text (just in case the text is not long enough)