The following is an ancestor DIV with margin-left: 50% and background: green. Therefore its width is 50%. It contains a DIV with margin-left: -100%; margin-right: 100% and background: yellow. As a result of these, the element should be yellow in the left half, and green (and empty of content) in the right.
The following is an ancestor DIV with margin-left: 50% and background: green. Therefore its width is 50%. It contains a DIV with width: 100%; margin-left: -100% and background: yellow. As a result of these, the element should be yellow in the left half, and green (and empty of content) in the right.
This has padding-left: 50% on the containing block, margin-left: -100% on the inner. As a result, the content and background should be as wide as this element is, and should be red in its entirety.
This has a containing DIV with background: red and margin-top: 10px. Inside it has margin-top: 30px with a blue background. Since CSS states that the collapsed margin does not form part of the content area of the DIV, it should be transparent to the color of the BODY (i.e., no red should be visible).
Content
This has padding-top: 50% on the containing block and margin-top: -50% on the inner. Since they relate to the width of the containing block, they are the same and no green (the background of the containing block) should be visible above the inner DIV; however, space should be visible below it since the top margin does not affect the size of the padding of the containing DIV.
This one has width: 50%; padding-top: 50% on the containing block and margin-top: -50% on the inner. As a result, in addition to being 50% of the width of this, there should also be green visible on top since the margin-top (related to the width of the containing block) is only worth half as much on the inner element.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.