Jerod Venema wrote: > Thanks all for the replies...the overflow: hidden does indeed do the trick, [snip] > ...I'm still playing with it to figure this out...
I just sent something like this to the list a while back, so pardon the redundancy, but it seemed to help some folks, so here it is again: Brief ASCII Overview of Collapsing Margins: Key: [m] = margin, [p] = padding, [b] = border I think it helps to think of margins as broken lines, or like the teeth of a zipper, so that the top and bottom margins might be represented like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) Visualizing it that way helps to make sense of why they collapse. The "teeth" fall into and around each other, resulting in a collapsed margin like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px collapsed top/bottom margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) To switch the margins to a solid form, we can add padding or borders, which act as a sort of "filling" and make the margins solid like this: mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px top margin) ppppppppppppppppppppppppppppp (#px top padding) Lorem ipsum dolor sit amet... ppppppppppppppppppppppppppppp (#px bottom padding) mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px non-collapsed bottom margin) mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px non-collapsed top margin) ppppppppppppppppppppppppppppp (#px top padding) Lorem ipsum dolor sit amet... ppppppppppppppppppppppppppppp (#px bottom padding) mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px bottom margin) ...or use borders which achieve the same effect. mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px top margin) bbbbbbbbbbbbbbbbbbbbbbbbbbbbb (#px top border) Lorem ipsum dolor sit amet... bbbbbbbbbbbbbbbbbbbbbbbbbbbbb (#px bottom border) mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px non-collapsed bottom margin) mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px non-collapsed top margin) bbbbbbbbbbbbbbbbbbbbbbbbbbbbb (#px top border) Lorem ipsum dolor sit amet... bbbbbbbbbbbbbbbbbbbbbbbbbbbbb (#px bottom border) mmmmmmmmmmmmmmmmmmmmmmmmmmmmm (#px bottom margin) -- <!-- ! Bill Brown <macnim...@gmail.com> ! Web Developologist, WebDevelopedia.com --> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
