468,544 Members | 1,759 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,544 developers. It's quick & easy.

Horizontal margin collapsing

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 | |
| | | | | |
| | | | | |
| | | | | |
| |_______________________| |_______________________| |
| |
|_________________________________________________ _______|
Aug 9 '06 #1
1 5379
Jeremy wrote:
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).
<snip>
Please disregard this message on the grounds that I'm an idiot.

Solution: floaters have equal margin on both sides. *Container* gets
left and right padding equal to this margin.

Duh.

Jeremy
Aug 9 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Brian | last post: by
1 post views Thread by Peter Mount | last post: by
19 posts views Thread by Thomas Mlynarczyk | last post: by
3 posts views Thread by =?ISO-8859-1?Q?Ney_Andr=E9_de_Mello_Zunino?= | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.