This is the first div in the main sequence. The content area should be 200 pixels wide, excluding
its padding, border and margin.
This is the second div. It should also be 240 pixels across. The text
should start 20 pixels from its left edge, so it should line up with the
inner edge of the borders on the other two divs.
This is the third div. It should fill the width of the page.
This is the fourth div. It should look like the first one but be 20 pixels
to the right.
This is the fifth div. It should be the same width as the inner part of
the previous one. It should have a
margin the same thickness as the previous one's border.
This is the sixth div. It should be 200 pixels wide, excluding its border or
margin. There's no padding on this div – padding doesn't count towards
the width so the total div including border should be narrower than the first
div, but the area with text in it should be the same width as the first in the sequence.
Now the same thing with P tags
This is the first paragraph. The content area should be 200 pixels wide, excluding
its padding, border and margin.
This is the second paragraph. It should also be 240 pixels across. The text
should start 20 pixels from its left edge, so it should line up with the
inner edge of the borders on the other two paragraphs.
This is the third paragraph. It should fill the width of the page.
This is the fourth para. It should look like the first one but be 20 pixels
to the right.
This is the fifth para. It should be the same width as the inner part of
the previous one and the text should be in the same place. It should have a
margin the same thickness as the previous one's border.
This is the sixth div. It should be 200 pixels wide, excluding its border or
margin. There's no padding on this div – padding doesn't count towards
the width so the total div including border should be narrower than the first
div, but the area with text in it should be the same width as the first in the sequence.
And finally, the same trick with h4s (I've changed the font format to be
the same as body text).
This is the first heading. It should be 200 pixels wide, including its padding
but not its border or margin.
Add in the border and that's 240 pixels across.
This is the second heading. It should also be 240 pixels across. The text
should start 20 pixels from its left edge, so it should line up with the
inner edge of the borders on the other two paragraphs.
This is the third heading. It should fill the width of the page.
This is the fourth heading. It should look like the first one but be 20 pixels
to the right.
This is the fifth heading. It should be the same width as the inner part of
the previous one and the text should be in the same place. It should have a
margin the same thickness as the previous one's border.
This is the sixth div. It should be 200 pixels wide, excluding its border or
margin. There's no padding on this div – padding doesn't count towards
the width so the total div including border should be narrower than the first
div, but the area with text in it should be the same width as the first in the sequence.