| Jeremy 2006-08-09, 7:14 pm |
| 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 | |
| | | | | |
| | | | | |
| | | | | |
| |_______________________| |_______________________| |
| |
|________________________________________________________|
|