homepage Welcome to WebmasterWorld Guest from 54.243.13.30
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
alternative to setting widths on floated divs?
text longer than the width of the div causes it to move
FranticFish




msg:4391447
 1:11 pm on Nov 27, 2011 (gmt 0)

I'm having problems (all browsers) with floating divs.

The (dynamic) page is fairly fluid. I have sets of either 2 or 3 divs held in a container, and I want these to float left, in a row. Imagine a shopping cart where
- some products have their own page so we show a thumbnail
- some don't so we show a larger image, and
- some of these also have alternate images (different angles etc)

<div container>
<div A></div>
<div B (optional)></div>
<div C></div>
</div>

DIV A holds an image, but this image can have two different widths.
DIV B is optional and holds tiny images to swap the main image
DIV C holds the text, and this can have three different widths.

Where the text content in DIV C is longer than the space it has left after DIV A (and maybe DIV B) have had their share, it breaks out of the row and the text is displayed under the image div(s) rather than to the right of it as I would like.

Am I going to have to create classes to deal with all the different combinations of div widths, or is there a CSS fix (maybe something to do with the 'overflow' command) that I could use on DIV C instead?

 

Paul_o_b




msg:4391460
 3:03 pm on Nov 27, 2011 (gmt 0)

Don't float div C but instead use overflow:hidden (and zoom:1.0 for ie6)and then it will form a rectangular block that will take up the available space. However if this is in a fluid layout you could find content being cropped by the overflow:hidden unless you control the min-width.

FranticFish




msg:4391600
 9:41 am on Nov 28, 2011 (gmt 0)

Thanks; I'll look into that, but if I have to set a min-width, there are three values it could have, so I may as well set a real width and be done with it!

Paul_o_b




msg:4391666
 2:56 pm on Nov 28, 2011 (gmt 0)

You may not have to set a min-width as it all depends on the content you have. Try it first and it may be ok without a min-width.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved