Tutorial 20: CSS Floats, Part I
|
| ||||
| ||||
|
|
Box model revisited
Way, way back in Tutorial 9 I introduced you to the CSS box model and the atrocities that have been committed against it by browser makers. For the purposes of this tutorial, we'll have a brief reminder of how things work in CSS boxes.
Let's look at a typical paragraph element in a document, such as the following:
<P>This is the content area of the element. Outside the content area is the <I>padding</I> (shown in yellow). Outside the padding is the <I>border</I> (shown in red), and finally, ouside the border is the <I>margin</I> (shown in gray). The content area of the element also defines a <I>containing block</I> for the element's children, that is, all children of this element will be positioned with reference to this box.</P>
A few things about this paragraph. Firstly, it is a block element, so by default it creates a block box. Also, its content is inline data. We haven't dealt much with the details of how inline data is rendered. For the moment, it suffices to assume that all inline data is just text that is wrapped around to fit the width of its container. Here's a diagram showing the various parts of our paragraph's box:
A diagram of a CSS box, with content in white, paddings in yellow, borders in red and margins in gray.
The paragraph's width depends on the width of its containing block, just like the width of the text inside the paragraph depends on the width of the content area of the paragraph. The paragraph's height depends on the size of the text inside, and will grow to fit the text accordingly. This is an important rule of thumb for CSS: All things being equal, a box's width depends on the width of its parent, but its height depends on the height of its children. More precisely, the width depends on the width of the element's containing block, which is normally the content area of its parent, but not always; as we saw in Tutorial 18, this is not the case for absolutely positioned elements. Another exception to this rule is the BODY element: since it has no parent element that is rendered, its containing block is the viewport, which means the part of the Web browser in which the document is shown. Most often, the width of this viewport is determined by the user as he resizes the window to his liking.
