Getting Right And Left Floats To Coexist

[frEEk]

I've got like 5 hairs left on my head after the last few days, so really hoping someone has a solution to this:Trying to setup a layout similar to a classic magazine/newspaper, but it jsut won't work because floated DIVs are not behaving as I would like/expect. Test page is at http://www.delegated.net/tests/css-float.htmlEach blocks on both the right and left are of unknown height (with the exception of the one large one in the middle).FF3, Chrome, Opera, and IE8 result in thisIE7 comes the closest to what I want withWhat I _want_ isIf what I am trying to achieve is impossible (and i'm getting the feeling it is, given the dynamic height of each box) the alternative is floating the right elements and flowing the left... HOWEVER this results in some overlap of the elemets within the left boxes over the large right/middle box in some cases. Seems to be a result of a floated right block being aligned with the TOP of a left flowed inline element, instead of the bottom. Any way to stop this?If anyone has a working solution to this, my 5 hairs will be eternally grateful.

[jeffman]

The normal thing would be to float an element left, then an element right, then clear the next line and float an element left, then an element right, repeat all the way down.But this pattern is very awkward with elements of different heights, and probably impossible with elements of dynamic height.The obvious thing is to have a tallish container floating left, and it hold three block-level "red" elements, and another container floating right, which holds two stacked "blue" elements.Close those containers. Add the div that stretches the whole width.Then open two side by side containers again.

[frEEk]

Hi D-Dad,That was what I had initially actually, until I was reminded that the blue elements will vary between 100 and 620 pixels tall each, while the red elements (at least those above the problem large block in the center) vary fairly little. End result, that approach won't work.Thanks for trying tho. Any other thoughts?You know, this must be the first time I've had a CSS layout issue that couldn't be fixed by falling back to tables...

[jeffman]

End result, that approach won't work.

I'm not seeing that yet. What haven't you told me? Or are you assuming something? The only thing I can see mattering is if the number of elements above the large center block will vary.

[frEEk]

Sorry, I guess I'm not explaining well enough. The # elements don't vary. However the height of each element varies.I can put 2 reds (which are fairly static height) and 2 blues above center element, but sometiems a blue will be the height of 4+ normal blues (skyscraper vs button ad) so u'd have HUGE space below the 2 reds. Hence why this all has to be very liquid.

[jeffman]

I guess the diagram led me to think that space was acceptable.How are you going to have that center box positioned after 2 blues and 3 reds without a big space? Where would the space go?Or are you hoping the center box will relocate somehow? Is that what this question has been about the whole time?

[frEEk]

Yes, hence the use of floats. If you look at the source you can see I am floating the blues right and the reds left. My assumption would be that they should float against each other much like your standard floats + inline content does. And they do so long as none of the elements cross each other's paths (ie. they do not cross an imaginary vertical line separating the "columns"). But seems once that line is crossed, floats don't behave the way I would expect. According to the parts of CSS spec I have referenced, IE7's implementation actually seems to come closest (with the overlap, which can also be seen when a block is floated next to a flowed block).

[jeffman]

I'm stumped. No matter what direction I float the red boxes, or which direction they are set to clear, in Firefox they will not float above the top of the lowest blue box. I have noted in the past the IE seems to use a different model (generally it's annoyed me) but I'm finally getting a handle on just what the difference is.Put simply, a Firefox block does not float higher than the previous block.So that defines the problem. Maybe someone with more CSS savvy than me will look at that statement and pull a solution out of a hat.