2-column layout and top margin of floated column

[=?ISO-8859-1?Q?Ney_Andr=E9_de_Mello_Zunino?=]

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]

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]

On 2007-04-19, Ney André de Mello Zunino <zu****@inf.ufsc.brwrote:

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 <pcollapses
with the bottom margin of the <h1(even though the <pis 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 <ptop margin and <h1bottom
margin apart so they can't collapse.

[Jonathan N. Little]

Ben C wrote:

Correct. In the second column, the top margin of the first <pcollapses
with the bottom margin of the <h1(even though the <pis 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 <ptop margin and <h1bottom
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