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?
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.