Here is the outer
div. THis one has a left margin of 10%.
and a right margin of 5%; These percentages will be evaluated
relative to the width of the
body element -- namely, the
browser window.
First inner div -- margin-left: 10%; margin-right: 5%;
These margins should be evaluated relative to the width of the
parent element—--the div it is inside. Note how
text-indent: -4em causes a hanging indent.
Second inner div -- margin-left: -10%; margin-right: -5%;
padding-left: 3em; padding right-5em; Margins and paddings should
be evaluated relative to the width of the parent element--the width
of the div it is inside.
Third inner div -- width: 50%; margin-left: auto; Should
be half width of parent div and flush to right.
Fourth inner div -- width: 50%; margin-right: "auto"; Should
be half width of parent div and flush to left.
Fifth inner div -- width: 50; margin-right: auto; margin-left:
auto; Should be half width of parent div and centered inside
it.
Here again is the outer
div. This is here just to add some
text below the final internal div.