alternative to setting widths on floated divs?

text longer than the width of the div causes it to move

[FranticFish]

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]

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]

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]

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.