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 B (optional)></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?