Welcome to WebmasterWorld Guest from 54.166.46.226

Forum Moderators: not2easy

Message Too Old, No Replies

Wrapping text around images within div

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

   
11:07 am on Apr 19, 2003 (gmt 0)

5+ Year Member



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.

11:22 am on Apr 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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!

11:26 am on Apr 19, 2003 (gmt 0)

10+ Year Member



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".
11:58 am on Apr 19, 2003 (gmt 0)

5+ Year Member



Just what I needed.

Thanks very much,

Dave.