homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Words not wrapping in DIV
Nesting DIV with float:left, but text does not wrap
RJell

10+ Year Member



 
Msg#: 3435 posted 1:34 pm on Apr 14, 2004 (gmt 0)

I'm trying to do a fairly simple layout with an image on the left side, a caption below it, and a block of text wrapping around the image/caption block. This is easy enough by simply doing a "float: left" on the image/caption block, but unfortunately the layout looks bad if the text is wider than the image because it pushes the "wrapping" text way off to the right. I can get around this by assigning a width to the div that contains the image and caption, but I hate to do that because this is going to be a layout that many different people use and there's no telling what size their images will be...

Here's my css:

#menu{
padding: 2px;
float: left;
font-size: 200%;
font-weight: bold;
margin-right: 10px;
}
#content{
float: left;
}

And here's the html:

<div id="content"><div id="menu"><img src="someimage.jpg" width="232" height="150"><br>
"lorem ipsum dolor sit amet..."</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

I know that everything is behaving how it should, but I'd love to find a way for the text to only be as wide as the image without forcing users to put br's in their captions. Any advice would really be appreciated.

 

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3435 posted 6:11 pm on Apr 14, 2004 (gmt 0)

A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).

- [w3.org...]

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