How do I force a line break when two CSS floating elements collide?

Thanks for you comment, but I can't seem to get it working with either of those solutions. The example page is entirely self contained in that document, so if you could modify the code so it works with your solution then paste it here that'd be a huge help, because I can't seem to getting working using "display: inline" or <span> tags.

The green eventually does break below the blue when the red gets close enough to the blue -- i.e. same width as green.  Hence it is just the narrow width of the red that is causing this behaviour.  Make the red wider, or embed it in a wider DIV that is as long as the green, and simply align the red to the right of the wider div.  SPAN will not do this, as they are in-line tags, they will definitely not force a line break like DIV

Thanks for your comment scrathcyboy.

However, this is not the solution I am after, because I cannot simply change the width of the red box (which will be a photo).

Here is a more comprehensive example, which will explain more what I am after and why I cannot simply change the width of the red box:

http://www.scottswebdesign.com.au/example2.html

The problem, you'll see, is that "Product Three" is not breaking under "Product Two", but just moving down (because they are both floated) and leaving an ugly white space in the list. Changing the width of the photo is not the solution I am after, because that will make the photos on this page too large.

I am after some way to cause the break when the left float (a list item) collides with the right float (image), instead of just moving it down the amount they collide.

Thanks.

The reason I am using a float for the products is that each product is a self-contained table that looks like this:

             | Product name
Image   | Brand
             | Category

And so the default for tables is the break to a new line for each table, unless I float them. The products are actually in a series of categories. Product One and Two are one category, three and four another, and so on. What may work is if I contain each category is a separate div, and the div resizes when colliding with the image. However, I don't know how to do this either. All my attempts have resulted in the DIV continuing under the floated image (see red box example):

http://www.scottswebdesign.com.au/example4.html

Any ideas how to made the div width relative to what float it collides with?

Thanks for staying on this with me mate. I look forward to giving you the points when this is all sorted, I think we're almost there.

Scott

Well, I think the solution to this is easier than you thought.  If your server code is outputting a table, you should use a TABLE structure to lay it out -- not DIVs.  There is a lot of conflict with DIVs in tables, and DIVs trying to limit what tables do -- these surface as real gotchas because browsers do it different.

Why can't you just output a table structure for the parts of the page where you are outputting product lists and photos?  If you want help in a whole page table layout, that I can do for you.  Just ask.

I think with colliding DIVs you are fighting a battle on this page you probably don't need to be fighting.

I'm not a huge fan of table structures, they were all I knew for so many years until I was "enlightened" by the possibilities of CSS. My experience with tables seems to show that they are even less favourable with floating objects than DIV's were. I originally had the products displayed in a table, using TD cells to divide each product, but when that collided with a float it would just write over the image, the table would act as though no float was there at all, or as if it were absolutley positioned.

Thanks for the design offer, but I already have the whole site layout sorted (using DIV's), its just this one issue I am having with colliding floats.

Any ideas on how to make a div tag change its width when it collides with a float (see example4.htm above), I'm pretty sure this is the solution I am after, and I can use this to get my desired result.

I've been experimenting, and I seem to have gotten it to work.

What I have used is a  to wrap each tabled product, and somehow it seems to be working. I can only test it on Firefox and Safari on my computer, so not sure if IE likes it, but it works on those two.

Why would this do what I am after? I have never heard of inline-block before, is it widely supported across browsers. I just found it through google, and experimented.

Here's the working page:

http://www.scottswebdesign.com.au/example.html

the blank is meant to be a "DIV tag with display:inline-block"

The latest link works fine in IE6 -- which is the only IE I have for testing.

Sorry if I did not mention display:inline here -- I certainly meant to.  It forces all DIVs to basically keep in a wrap framework rather than an individual separate framework, as tables do by default.  I have been telling so many other threads about it, I could have sworn I also mentioned it here, but it slipped by.  Anyway it is the obvious fix for this, and I should have said it earlier.  Comes from trying to help too many people at once.

Cheers

Here --
http://www.quirksmode.org/css/display.html
http://www.brunildo.org/test/InlineBlockLayout.html
http://www.hedgerwow.com/360/dhtml/css-display-inline.html
http://archivist.incutio.com/viewlist/css-discuss/45982

mostly to fix IE7 display problems, also in the last link is the mozilla version.