This next example allows the browser to automatically adjust the size of the
right margin, to ensure that a paragraph remains at a fixed size and at a fixed
distance from the left side of the browser window.
You can individually specify the left, right, top, and bottom margins using, for
example, code like this:
p {width: 150px; margin-right: auto; margin-left: 150px;}
This interesting style says that the content should be fixed at a width of 150
pixels, and that the left margin is fixed at 150 pixels. The parent element is, in
effect, the browser window itself (technically, the parent is the <body>ele-
ment if no other parent is involved, but the browser window certainly seems
to be the parent). In other words, the total distance from the left side of the
browser window to the right side of the content (the paragraph’s text) must
be maintained at 300 pixels. The right margin, however, automatically adjusts
to maintain those two other fixed widths. The effect of the autoproperty is
to freeze the paragraph at a specific horizontal location within the browser
window, even if the user stretches or shrinks the browser window by resizing
it (or if some other event causes resizing).
To understand this effect, take a look at Figure 11-1. This paragraph uses no
CSS style. No autovalue is in effect, so when the user widens the browser
window (the window on the right side), the text widens to fill the width of
the window.
The browser on the left in Figure 11-1 is stretched and ends up looking like
the browser on the right. The paragraph of text widens to accommodate the
new browser width.
Figure 11-1:
When you
don’t use
auto, a
paragraph
stretches as
necessary
to fill the
width of the
browser
window.
198 Part III: Adding Artistry: Design and Composition with CSS
