Sunday, January 1, 2012

Imagine a multi-column element

We’ve got a bit of a tricky question on expected behavior of multi-column layout for you folks.
First, I want you to imagine a multi-column element. Like this one:
In a multi-column element, several paragraphs of text flow into three height-balanced columns.
Now suppose that you want to use a column-spanning element. Column-spanning elements stretch across the entire multi-column element. Content before one balances into a short row of columns before it, and content after it continues in another row of columns after it. Like this:
In a three-column multi-column element, a column-spanning header spans across all three columns.
Next, suppose you place two spanning elements, one after the other, like this:
In a three-column multi-column element, both a column-spanning header and a column-spanning image immediately after it span across all three columns.
Finally, suppose you gave each spanner a 1em vertical margin on both sides (margin: 1em 0). Remember that vertical margins between normal block-level elements collapse (so there would be only 1em gap between the two) whereas margins between stacked floating elements do not collapse (so there would be a 2em gap between the two).
In your ideal world, is there a 1em or 2em gap between the two elements?
Separate Margins (2em Gap) Collapsed Margins (1em Gap)
Post your thoughts in the comment section, and we’ll forward them to the CSS Working Group.

No comments: