HTML and CSS —

Containing Blocks

Another important concept when working with CSS positioning is the containing block. A containing block is any parent block box to the element you're trying to position. Consider Example 12-2.

Example 12-2. Understanding containing blocks
<div id="content">
<h1>The Black Cat</h1>
<h2>By Edgar Allen Poe</h2>

<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
 wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
 she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
 fish, a fine dog, rabbits, a small monkey, and a cat.</p>

<p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and
 beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of
 his intelligence, my wife, who at heart was not a little tinctured with superstition, made
 frequent allusion to the ancient popular notion, which regarded all black cats as witches
 in disguise. Not that she was ever serious upon this point - and I mention the matter at
 all for no better reason than that it happens, just now, to be remembered.</p>
</div>

As you see, I've placed all the content into a div element, which I've given an id of content (how's that for brilliant?) All the blocks within the content div are now contained by the div.

Suppose you went a step further and placed a container around the content:

<div id="main">
<div id="content">
...
</div>
</div>

The content div is now contained by the main div, which becomes the content div's containing box.

That's pretty simple so far, I think. But if you're having trouble visualizing this, think about those lacquered Chinese boxes that come nested one inside the other. The largest box contains the middle box, which contains the small box. So, the small box's containing block is the middle box, whose containing box is the large box.

It's important to understand this concept because when you begin to use positioning, the containing block of an element can have a lot to do with how the element or elements it contains are actually positioned.

Step back for a moment to Example 12-1. There's no obvious containing block, is there? Will you be surprised if I tell you that there's still a containing block? Here's how it works: If there is no specified containing block, the containing block is the root element. We know that the root element is html, so that's the containing block.

QUANTUM LEAP: BROWSER DEFAULTS

Why does it matter that html is the containing block when no other is specified? In the sense of positioning, it matters because there are browser default styles for many elements, including html. I discussed this a bit in tutorial 7, "Using CSS." Each browser has a default style sheet so that if you do not apply styles, some visual styling will still occur. This is why, without style, headers, paragraphs, links, and more still have a font, font size, and weight. When working with positioning, it's going to look as if certain positioned boxes are positioned in relation to the browser edges (also known as chrome). In reality, the positioning of certain uncontained blocks is due to the default styles given to the html element.


For Figure 12-3, I simply styled the html element to have a 2-pixel border. You can see how different browsers interpret the html element.

Figure 12-3. From left to right: Firefox, Opera, and Internet Explorer 6.0note how Firefox and Opera interpret the html element and its styled borders within the document, whereas, in IE, the bottom and left portions of the element include portions of the browser such as the scrollbar.

IE's implementation is quirky, although not incorrect, because the specs are not very clear regarding how browsers should implement containing blocks. That's all the more reason to understand the why of positioning as well as the application of positioning.