Page 1 of 3 In out last article, The Theory of CSS Column Design: Semantic Construction, we discussed making accessible layouts using divs for basic page construction blocks. Now we will show how to build a column of separate bordered boxes, each with a colored header, similar those currently in use on the CMX main page (as of July, 2004), shown in the graphic to the right.
This paragraph has a green background, yellow text, and has 10px margins on all sides, along with 5px padding to keep the text from touching the sides of the green paragraph.
The outer black border is only there to show the exact position of the containing div element. The paragraph background-color is used for the same reason.
Demo 1: from the Semantic Construction article
Image: CMX Column Design
We ended the previous article with an example demo of plain paragraphs inside a bordered div column, as reproduced in the live demo to the left. Since the aim of the current exercise is to have a vertical row of bordered boxes, we will start by removing that indicator border on the container div and apply it to the paragraph selector instead. While we're at it, we'll also remove those awful colors from the paragraphs (Holly insists!).
Once that is done, what is left is a column of bordered and colored boxes, each with a paragraph's worth of text. The code for this is in Code Block 1 below.
One thing you must be aware of when arranging margined boxes vertically like this is the confusing way in which their margins can interact. The behavior is often referred to as "escaping margins," but it is not clearly described as such by the W3C. That part of the margin specifications is not easy to explain.
Take a look at Demo 1 above and think about the upper 10px margin on the top paragraph. In the demo, you can see how that top margin is trapped in between the top div border (black line) and the green paragraph top. The margin is the white area. Well, according to the specifications, the only thing that keeps the margin there is that top border!
The HTML:
<div id="holderdiv">
<p>Just a typical paragraph</p>
<p>Just another typical paragraph</p>
</div>
The CSS:
#holderdiv {width: 250px;}
#holderdiv p {
margin: 10px;
padding: 5px;
color: #363636;
background-color: #eec;
border: 1px solid black;
}
We retained a background-color on the paragraph, but muted it to a less dangerous level. Not many people like a bordered box showing the same background as the page.
See how the paragraph margins are still here, even though it is no longer obvious.
Demo 2
Now take a look at Demo 2. There we have removed the div border as shown in Code Block 1. Even though you can't see it, the top margin on the first paragraph now actually sticks out the top of the div. It sounds weird, but that is the way the W3C decided to do it.
Unfortunately, Explorer for Windows only obeys this part of the margin specs when the containing div does not have a dimension. Since the containing divs in all the demos here do have widths, IE/Win acts like the border is still there, keeping the margin trapped instead of letting it escape like the specifications require. This is nothing unusual for Explorer; all kinds of spec violations can happen in that browser when a critical element is given a dimension.
To the right are screenshots showing the true margin arrangements in IE/Win and Mozilla. The div has been colored gray to indicate its location and size. Notice how Mozilla lets the invisible vertical margins go out the top (and bottom) of the div. The bottom escaping margin then collapses with the top margin on the caption paragraph below. If the div did not have an assigned width then IE/Win would display just like Mozilla.
Happily, once this problem is understood, it's easy to avoid the differences in display it may cause in various browsers. Just remove the top margin from the paragraphs and use a top padding on the div instead. Vertical padding on a box with no assigned height does not cause the box model problem, so it's perfectly safe. Yes, all the paragraphs will have their top margins stripped off, but their bottom margins will still keep the spacing between paragraphs the same.
Below is how the code might look when using this technique:
#holderdiv {
width: 250px;
padding-top: 10px;
}
#holderdiv p {
margin: 0 10px 10px 10px;
padding: 5px;
color: #363636;
background-color: #eec;
border: 1px solid black;
}
Be aware that either borders or padding can trap the margin inside the div, so it's possible to use as little as 1px top and bottom padding on the div to permanently trap the margin of a child element within the div. These workarounds are often not needed, but in some layouts it is the only way to make things look the same in all browsers, so it's good to know about them in advance. Many a margin newbie has been brought close to madness while trying to figure out this puzzle. Don't let it happen to you.
Keywords
CSS, column design, design, headings, bordered boxes, escaping margins, collapsing margins, layout
