Let's say I have some block elements that self-organize by floating to

the left, so if no more blocks can fit in a row they begin on the next

row (see crummy ASCII art at end of message).

I could define the CSS for one of the floating elements as such:

..floater

{

float: left;

width: 48%;

margin-left: 1%;

margin-right: 1%;

}

The problem here is that the floaters will then have twice as much

margin in between them as they will between the floaters and the sides

of the container. Now, in CSS2 (and 3?), vertical margins can collapse

(so that the margins of two elements are overlapping) but horizontal

margins are unable to do so. Is this correct? And can anyone think of

an elegant way to simulate this - and get equal spacing between the

floaters and the edges, and the floaters and each other?

I could do something like this:

..floater:nth-child(2n) { margin-left: 1%; margin-right: 0.5%; }

..floater:nth-child(2n+1) { margin-left: 0.5%; margin-right: 1%; }

except that (a) that pseudoclass is not (AFAIK) widely supported, and

(b) what if I have more than two elements per row?

That turned out to be far longer-winded than I expected; I hope someone

read all the way through :-)

Thanks,

Jeremy

Crummy ASCII Art Diagram:

__________________________________________________ ______

|Container |

| _______________________ _______________________ |

| | Floater #1 | | Floater #2 | |

| | | | | |

| | | | | |

| | | | | |

| |_______________________| |_______________________| |

| _______________________ _______________________ |

| | Floater #3 | | Floater #4 | |

| | | | | |

| | | | | |

| | | | | |

| |_______________________| |_______________________| |

| |

|_________________________________________________ _______|