Stylesheets - 2-column layout and top margin of floated column

Author

2-column layout and top margin of floated column

Ney André de Mello Zunino

2007-04-19, 6:17 am

Hello.

I seek confirmation for the reasons behind a margin-related behavior I
have observed. I have set up a simple test page [1] to illustrate the
issue. The page shows a very simple 2-column layout, where columns are
contained in /div/ elements.

The first column is floated left and the second one is offset by a left
margin. You should be able to notice that the contents of the first
column are lower than those of the second one. Is that an instance of
the behavior defined in section 8.3.1 [2] of the CSS 2.1 standard?
Namely, "Vertical margins between a floated box and any other box do not
collapse (not even between a float and its in-flow children)."

Bringing that definition onto the case in hand, would it be correct to
conclude that the bottom margin of the heading and the top margin of the
first paragraph of the first column are not collapsing and, therefore,
the resulting total margin is bigger than that of the second column?

[1] http://zunino.eti.br/css/tests/2-column.html
[2] http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Thank you,

--
Ney André de Mello Zunino

boclair

2007-04-19, 6:17 am

Ney André de Mello Zunino wrote:

> The first column is floated left and the second one is offset by a left
> margin. You should be able to notice that the contents of the first
> column are lower than those of the second one. Is that an instance of
> the behavior defined in section 8.3.1 [2] of the CSS 2.1 standard?
> Namely, "Vertical margins between a floated box and any other box do not
> collapse (not even between a float and its in-flow children)."
>
> Bringing that definition onto the case in hand, would it be correct to
> conclude that the bottom margin of the heading and the top margin of the
> first paragraph of the first column are not collapsing and, therefore,
> the resulting total margin is bigger than that of the second column?

And you can see why this behaviour by setting the bottom margin of the
h1 element to 0.

Louise

Ben C

2007-04-19, 6:17 am

On 2007-04-19, Ney André de Mello Zunino <zunino@inf.ufsc.br> wrote:
> Hello.
>
> I seek confirmation for the reasons behind a margin-related behavior I
> have observed. I have set up a simple test page [1] to illustrate the
> issue. The page shows a very simple 2-column layout, where columns are
> contained in /div/ elements.
>
> The first column is floated left and the second one is offset by a left
> margin. You should be able to notice that the contents of the first
> column are lower than those of the second one. Is that an instance of
> the behavior defined in section 8.3.1 [2] of the CSS 2.1 standard?
> Namely, "Vertical margins between a floated box and any other box do not
> collapse (not even between a float and its in-flow children)."
>
> Bringing that definition onto the case in hand, would it be correct to
> conclude that the bottom margin of the heading and the top margin of the
> first paragraph of the first column are not collapsing and, therefore,
> the resulting total margin is bigger than that of the second column?
>
> [1] http://zunino.eti.br/css/tests/2-column.html
> [2] http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Correct. In the second column, the top margin of the first <p> collapses
with the bottom margin of the <h1> (even though the <p> is nested inside
the <div>, which is rather surprising at first, but is what's meant to
happen-- see 8.3.1 of the CSS 2.1 spec).

If you want both columns to line up, one way to do it is to give each
div top padding of 1px. That keeps the <p> top margin and <h1> bottom
margin apart so they can't collapse.

Jonathan N. Little

2007-04-21, 6:17 pm

Ben C wrote:

> Correct. In the second column, the top margin of the first <p> collapses
> with the bottom margin of the <h1> (even though the <p> is nested inside
> the <div>, which is rather surprising at first, but is what's meant to
> happen-- see 8.3.1 of the CSS 2.1 spec).
>
> If you want both columns to line up, one way to do it is to give each
> div top padding of 1px. That keeps the <p> top margin and <h1> bottom
> margin apart so they can't collapse.

If you add DIV { background-color: #eee; } you can see what's and
happening and also how MSIE works contrary by collapsing the top margin
of the first P in the first DIV...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com