CSS Float constraining DIVs

[davetufts]

This is hard to explain, so a visual aid is here:
http://dev.dave.imarc.net/examples/css-wants/

I have a page of content divs (grey blocks containing content) extending 100% wide, going down the page.

I want to float a block of text to the right, and have it constrain any 'content' div it comes in contact with like this (pushing 1 box) or this (pushing 2 boxes)

But all I get is the content div extending accross the page, and only it's content running arround the float like this:
http://dev.dave.imarc.net/examples/css-wants/
the two CSS styles are listed in each box.

Any ideas?? Thanks...

[Paul O'B]

Hi,

I don't think you can do exactly what you want without changing the code specifically for each div.

You can set a margin-right on the first div to clear the float to get the effect you want.

 .gap {margin-right:305px}

[/code]
<div class="content gap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce vestibulum, urna ac dictum egestas, libero tellus posuere ante, sed tincidunt
lacus ligula ac urna. Nam id enim. Morbi libero. Integer convallis. Nulla neque etc................
[/code]

Obviously you can't then make the second div down behave the same unless you apply a margin to that also. I can't see a way to do it automatically as floats only make room for themselves by applying padding to surrounding content and allowing the content to reflow around them.

Paul

[davetufts]

Paul,

I was afraid of that... unfortunately both lists are dynamic. Over time the yellow floating column will extend well beyond the first and second content block; and each content block is dynamic, some may just have 1 word, some may have paragraphs...

I'm not doubting Paul, but if someelse thinks it is possible, let me know...

Thanks

[davetufts]

Though, I'd rather do this entirely in CSS, I seem to be having better luck with tables...

I recreated the page using tables - http://dev.dave.imarc.net/examples/css-wants/table.html - and it works a little better (if you resize the width of your browser, the grey blocks should wrap under, or be pushed to the left)...BUT unless there's a lot of content, the table doesn't extend the full width of the page.

Is there a CSS only solution?
Is there a mixed CSS/Table solution?

I'm driving myself crazy...this doesn't seem like it should be so difficult