vertical margin collapsing

Discussion in 'HTML' started by David Graham, Nov 22, 2003.

  1. David Graham

    David Graham Guest

    Hi
    I have a test page at:
    http://p0c79.phpwebhosting.com/~p0c79/test130.html

    The first 3 divs are not nested (shouldn't really have named these
    grandparent etc) - they are just a control to see what the bottom margin
    looks like on each div.


    The page looks the same in IE6 and Mozilla 1.4, but the last set of divs are
    much more spread out in Opera 7.1 - which is why someone in an earlier
    thread was having problems with his footer div being below the bottom of the
    view port.

    As I understand it, vertical margins collapse, so I was expecting a single
    bottom margin equal in size to the largest bootom margin set i.e. the 6em
    set on the child green div. This would mean that the red and blue bottom
    borders would coincide at 6em below the green div. This is not what is
    happening. I would appreciate it if someone could point out were I am
    interpreting vertical margin collapsing wrongly and why is Opera looking so
    different to IE6 and Mozilla 1.4

    thanks
    David
     
    David Graham, Nov 22, 2003
    #1
    1. Advertising

  2. David Graham

    Eric Bohlman Guest

    "David Graham" <> wrote in
    news:aWMvb.2121$:

    > I have a test page at:
    > http://p0c79.phpwebhosting.com/~p0c79/test130.html
    >
    > The first 3 divs are not nested (shouldn't really have named these
    > grandparent etc) - they are just a control to see what the bottom
    > margin looks like on each div.
    >
    >
    > The page looks the same in IE6 and Mozilla 1.4, but the last set of
    > divs are much more spread out in Opera 7.1 - which is why someone in
    > an earlier thread was having problems with his footer div being below
    > the bottom of the view port.


    It looks the same to me in IE6, K-Meleon 0.8 (based on Mozilla 1.5) and
    Opera 7.22.

    > As I understand it, vertical margins collapse, so I was expecting a
    > single bottom margin equal in size to the largest bootom margin set
    > i.e. the 6em set on the child green div. This would mean that the red
    > and blue bottom borders would coincide at 6em below the green div.
    > This is not what is happening. I would appreciate it if someone could
    > point out were I am interpreting vertical margin collapsing wrongly
    > and why is Opera looking so different to IE6 and Mozilla 1.4


    The vertical margins of *adjacent* blocks collapse, but not those of
    *nested* blocks. As Eric Meyer points out in his O'Reilly book, it's
    probably better to think of adjacent vertical margins as being
    "overlapped"; the second block is "slid up" by the amount of the smaller
    margin. That plainly won't work when one block is inside another.
     
    Eric Bohlman, Nov 23, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    5
    Views:
    966
    Dave Pollum
    Mar 17, 2006
  2. Bazley
    Replies:
    4
    Views:
    1,436
    Ben C
    Jan 1, 2008
  3. Cal Who
    Replies:
    1
    Views:
    432
    Alexey Smirnov
    May 16, 2010
  4. Cal Who
    Replies:
    4
    Views:
    578
    Cal Who
    May 17, 2010
  5. princess1

    Collapsing a vertical Menu

    princess1, Mar 28, 2007, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    122
    princess1
    Mar 28, 2007
Loading...

Share This Page