CSS: The Definitive Guide, 3rd Edition (24 page)

Figure 7-1. The content area and its surroundings

The various components of an element box can be affected by a number of
properties, such as
width
or
border-right
. Many of these properties will be used in
this chapter, even though we haven't discussed them yet. The actual property
definitions are given in
Chapter 8
, which builds
on the concepts set forth in this chapter.

Every element is laid out with respect to its
containing block; in a very real way, the containing block is the "layout context"
for an element. CSS2.1 defines a series of rules for determining an element's
containing block. I'll cover only those rules that pertain to the concepts covered in
this chapter and leave the rest for future chapters.

For an element in the normal, Western-style flow of text, the containing block is
formed by the
content edge
of the nearest block-level, table
cell, or inline-block ancestor box. Consider the following markup:

This is a paragraph.

In this very simple example, the containing block for the
p
element is the
div
element, as
that is the closest ancestor element that is block-level, a table cell, or
inline-block (in this case, it's a block box). Similarly, the
div
's containing block is the
body
. Thus, the layout of the
p
is
dependent on the layout of the
div
, which is in
turn dependent on the layout of the
body
.

You don't need to worry about inline elements since the way they are laid out
doesn't depend directly on containing blocks. We'll talk about them later in the
chapter.

Let's quickly review the kinds of elements we'll be
discussing, as well as some important terms that are needed to follow the
explanations in this chapter:

As of this writing, the Box Model module of CSS includes proposals for ways to
let authors choose whether
width
refers to the
content width or the visible box width.

Figure 7-3. Element boxes are as wide as their parent element's width

The "seven properties"
of horizontal formatting are:
margin-left
,
border-left
,
padding-left
,
width
,
padding-right
,
border-right
, and
margin-right
.
These properties, which are diagrammed in
Figure 7-4
, relate to the horizontal layout of block-level
boxes.

Figure 7-4. The "seven properties" of horizontal formatting

The values of these seven properties must add up to the width of the
element's containing block, which is usually the value of
width
for a block element's parent (since block-level elements
nearly always have block-level elements for parents).

Of these seven
properties, only three may be set to
auto
: the
width
of the element's content and the left
and right margins. The remaining properties must be set either to specific values
or default to a width of zero.
Figure
7-5
shows which parts of the box can take a value of
auto
and which cannot.

Figure 7-5. Horizontal properties that can be set to auto

width
must either be set to
auto
or a nonnegative value of some type. When you do
use
auto
in horizontal formatting, different
effects can result.

If you set
width
,
margin-left
, or
margin-right
to a
value of
auto
, and give the remaining two
properties specific values, then the property that is set to
auto
determines the length required to make the
element box's width equal to the parent element's
width
. In other words, let's say the sum of the seven properties must
equal 400 pixels, no padding or borders are set, the right margin and width are
set to
100px
, and the left margin is set to
auto
. The left margin will be 200 pixels
wide:

p {margin-left: auto; margin-right: 100px;
width: 100px;}   /* 'auto' left margin evaluates to 200px */

In a sense,
auto
can be used to make up the
difference between everything else and the required total. However, what if all
three of these properties are set to
100px
and
none of them are set to
auto
?

In the case where all three properties are set to something other than
auto
—or, in CSS terminology, when these formatting
properties have been
overconstrained
—then
margin-right
is
always
forced to be
auto
. This means that if both
margins and the width are set to
100px
, then
the user agent will reset the right margin to
auto
. The right margin's width will then be set according to the rule
that one
auto
value "fills in" the distance
needed to make the element's overall width equal that of its containing block.
Figure 7-6
shows the result of the
following markup:

p {margin-left: 100px; margin-right: 100px;
width: 100px;}   /* right margin forced to be 200px */

Figure 7-6. Overriding the margin-right setting

If both margins are set explicitly, and
width
is set to
auto
, then the value
of
width
will be set to whatever value is
needed to reach the required total (which is the content width of the parent
element). The results of the following markup are shown in
Figure 7-7
:

p {margin-left: 100px; margin-right: 100px; width: auto;}

Figure 7-7. Automatic width

The case shown in
Figure 7-7
is the
most common since it is equivalent to setting the margins and not declaring
anything for the
width
. The result of the
following markup is exactly the same as that shown in
Figure 7-7
:

p {margin-left: 100px; margin-right: 100px;} /* same as before */

Now let's see what happens
when two of the three properties (
width
,
margin-left
, or
margin-right
) are set to
auto
. If
both margins are set to
auto
, as shown in the
code below, then they are set to equal lengths, thus centering the element within
its parent, as you can see in
Figure
7-8
:

p {width: 100px; margin-left: auto; margin-right: auto;}

Figure 7-8. Setting an explicit width

Setting both margins to equal lengths is the correct way to center
elements, as opposed to using
text-align
.
(
text-align
applies only to the inline
content of a block-level element, so setting an element to have a
text-align
of
center
shouldn't center it.)

Another way of sizing elements is to set one of the margins and the
width to
auto
. The margin set to
auto
is reduced to
zero:

p {margin-left: auto; margin-right: 100px;
width: auto;}  /* left margin evaluates to 0 */

The
width
is then set to the value necessary to
make the element fill its containing block.

Finally, what happens when
all three properties are set to
auto
? The
answer is simple: both margins are set to zero, and the
width
is made as wide as possible. This result is the same as the
default situation, when no values are explicitly declared for margins or the
width. In such a case, the margins default to zero and the width defaults to
auto
.

Note that since horizontal
margins do not collapse, the padding, borders, and margins of a parent element can
affect its children. The effect is indirect in that the margins (and so on) of an
element can induce an offset for child elements. The results of the following
markup are shown in
Figure
7-9
:

div {padding: 30px; background: silver;}
p {margin: 20px; padding: 20; background: white;}

Figure 7-9. Offset is implicit in the parent's margins and padding