homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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)


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)

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.
<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>

Welcome to Webmaster World!

Longhaired Genius

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

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)

Just what I needed.

Thanks very much,


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved