467,915 Members | 1,290 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

2-column layout and top margin of floated column

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
Apr 19 '07 #1
  • viewed: 2638
Share:
3 Replies
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
Apr 19 '07 #2
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.
Apr 19 '07 #3
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
Apr 21 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Alfred | last post: by
30 posts views Thread by Diane Wilson | last post: by
3 posts views Thread by Spondishy | last post: by
9 posts views Thread by Xavier van Unen | last post: by
9 posts views Thread by TristaSD | last post: by
1 post views Thread by chr.aleksander | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.