Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > vertical margin collapsing

Reply
Thread Tools

vertical margin collapsing

 
 
David Graham
Guest
Posts: n/a
 
      11-22-2003
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


 
Reply With Quote
 
 
 
 
Eric Bohlman
Guest
Posts: n/a
 
      11-23-2003
"David Graham" <(E-Mail Removed)> wrote in
news:aWMvb.2121$(E-Mail Removed):

> 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to have margin-left: 10%; margin-right: 10%; only sometimes?? Cal Who ASP .Net 4 05-17-2010 12:17 PM
How to have margin-left: 10%; margin-right: 10%;" only sometimes Cal Who ASP .Net 1 05-16-2010 08:53 PM
vertical scrolling + margin-bottom Bazley HTML 4 01-01-2008 09:30 PM
Collapsing a vertical Menu princess1 ASP .Net Web Controls 0 03-28-2007 01:58 AM
Epson 4000 - margin to margin? nobody Digital Photography 6 03-28-2005 05:17 PM



Advertisments