The primary purpose of CSS is visual presentation. The box model is the primary CSS mechanism for creating layout. To start this discussion, let's first remind ourselves of two XHTML principles:
- Every HTML element, including both
inline and block-level elements
,
produces a rectangular box of some dimension. This is called an element box. This box describes the amount of space the element and its properties occupy within the layout of the document. Of foremost importance in this discussion are block-level boxes, although many box model properties apply to inline boxes as well. - In the normal flow of a document, each block-level box follows one after the other down the page. If you are reading this online and have the Web Developer Toolbar installed, you can see a graphic example by looking at this page with the Outline Block-Level Elements tool turned on. Specified positioning can override the normal flow of block-level boxes, but we will cover that topic in future weeks.
To begin understanding CSS layout, we must first establish that every element is laid out and positioned relative to its containing block. Every box is contained within, and relates to, a 'containing block.' In an HTML document, the initial containing block is the BODY element. Further on in the HTML markup, paragraphs may be placed inside a DIV, and the DIV becomes the containing block for those paragraphs.
The containing block and the boxes contained therein behave in a parent-child manner. Each box that is created becomes a containing block for its descendant boxes. The containing block controls the placement and behavior of any box(es) within it.
Definition: - "For an element in the normal document flow, the containing block is formed by the content edge of the nearest block-level, table cell, or inline-block ancestor box."
Instead of "thinking outside the box" we must now turn out minds to "thinking inside the box!"
Example markup:
<body>
<p>Here is a paragraph.</p>
</body>
The containing block for this P element is the BODY element. The paragraph is in the normal document flow.
If positioning, such as centering, was assigned to this paragraph, it would then become centered in relation to the overall width of the BODY element which is the containing block for this specific paragraph.
Note, also, that the width of the paragraph element fills the total width of its containing block. The paragraph is as wide as the body width is defined to be. More details on this will be coming up shortly!
In the following example we have a paragraph contained within a DIV element:
<body>
<div class="special">
<p>Here is a paragraph.</p>
</div>
</body>
The containing block for the DIV element is the BODY element. The DIV is positioned and relates to the specifications defined for the BODY.
However, the paragraph's containing block is now the DIV. The DIV is the paragraph's nearest block-level ancestor box. If we were to size or position the DIV, then the paragraph would adjust/react to those specifications because the DIV is the containing block for the paragraph.
The importance of the containing block is this: if we reset the
position property of the paragraph, then the paragraph's position relates to its containing
block, not necessarily the document as a whole.
Remember, we are now thinking inside the box - the containing block, to be exact!