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

CSS Forum

    
Wrapping text around images within div
Ensuring the height of the div is large enough to contain the image
davem




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

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




msg:1204351
 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.
<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




msg:1204352
 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".

davem




msg:1204353
 11:58 am on Apr 19, 2003 (gmt 0)

Just what I needed.

Thanks very much,

Dave.

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