Wrapping text around images within div

Ensuring the height of the div is large enough to contain the image

[davem]

Hi,

I'm using float to allow text to wrap around an image within a DIV.

The problem I have is when the height of the text is less that the height of the image. In this instance, the image overlaps the bottom of the div.

The behaviour I'd like is for the DIV's height to the the maximum of it's content or the floated image.

Any ideas?

In IE, setting the DIV's height to anything does the trick, though from what I read in the spec, I suspect this is a bug. This doesn't work in other browsers...

Thanks, Dave.

[Birdman]

Put an empty div after the img and the text. What happens is that floated elements are taken out of the flow and not calculated in the div's height. The empty div should have the style clear: both.
<div>
<img src="" style="float: left" />Text text text text text text text text text text text text text text text text text text text
<div style="clear: both;"></div>
</div>

Welcome to Webmaster World!

[Longhaired Genius]

You can work around this problem whilst sticking to the specs by putting an empty div at the bottom of the box and giving it the declaration "clear: both".

[davem]

Just what I needed.

Thanks very much,

Dave.