How can I keep a floated image/text in a section

problems when text runs out

[Psalm91]

I have a some text intersperced with images. I am doing something like so:

<img...>
<p>
...
</p>

where my css tells the image to float (either left or right). This all works great. The problem I have is when I run out of text so that the floated image hangs down beyond the text into the next section. Then, if I have an image floated right in the next section, the first will float to the right, and the next to the left of the first.

I've tried to contain the paragraph and image in a div and have tried 'vertical-align: baseline;' on the img.

I guess what I'm really asking - is there a way to grow a section to the size of the floated image? I've also tried doing this by spanning the text and setting the height to the image size, but then the text won't wrap around the image. I didn't like this anyway because I had to know the size of the image to set the span height.

Any ideas?

[drbrain]

You need to use the 'clear' property on an element that comes after all the floated text.

Using clear pushes that element to the line after the floated element.

<div>
<img style="float: ...">
<p>text
<p>text
<p>text
<div style="clear: both"></div>
</div>

[Psalm91]

As they say - "you da man!" (unless of course you are not, in which case - "you da woman!")

Anyway, that did fix my problem - many thanks.

Since I made that change, I have a new problem relating to a containing border but will put that under a new topic if I can't figure it out.

Thanks again...

[drbrain]

Well, the wrapper <div> is not strictly necessary, but I just stuck it in there for illustrative purposes.

Good luck!