CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNEDAligned and Offset Static Block
Problem You want to align a static block element to the left side, right side, or center of its
parent, and you want to offset it from its alignment.
Solution Sized blocks can be aligned and offset from their container. Static blocks can’t
be horizontally shrinkwrapped, and thus are either sized or stretched. If a block
is stretched, it can’t be aligned and offset because it’s indented. Use
width:+VALUE to specify an element’s width. You can’t align a static block unless
you set its width to a measurement or percentage.
To align to the left side, use margin-right:auto to align the element to the left
side. Use margin-left:+VALUE to offset the element to the right of the left side.
Use margin-left:-VALUE to offset the element to the left of the left side.
To align to the center, use both margin-left:auto and margin-right:auto to
horizontally center the element within its container.
To align to the right side, use margin-left:auto to align the element to the
right side. Use margin-right:+VALUE to offset the element to the right of the
right side. Use margin-right:-VALUE to offset the element to the left of the right
side.
Patterns Left-aligned Sized Static Block Element
BLOCK-SELECTOR { position:static; width:+VALUE;
margin-left:±VALUE; margin-right:auto; }
Center-aligned Sized Static Block Element
BLOCK-SELECTOR { position:static; width:+VALUE;
margin-left:auto; margin-right:auto; }
Right-aligned Sized Static Block Element
BLOCK-SELECTOR { position:static; width:+VALUE;
margin-left:auto; margin-right:±VALUE; }
Location This pattern works on static block elements.
Explanation A static element expands to fill the width of its container. When you set the
width of a static element, its width no longer fills the container. Instead, its
margins expand to fill the container. You can use the auto value to control
which margins expand. margin-left:auto automatically expands the left
margin to let the element align to the right. Conversely, margin-right:auto
expands the right margin to let the element align to the left. margin-left:auto
and margin-right:auto automatically expand both margins equally to center
the element.
Limitations You can’t vertically align a static block element because it’s always aligned to
the top of its parent block or below its previous sibling.
Related to Aligned Static Inline; Sized (Chapter 5); Left Aligned, Left Offset, Right Aligned,
Right Offset, Center Aligned, Center Offset (Chapter 9); Left Marginal, Right
Marginal (Chapter 13); Marginal Dropcap, Marginal Graphic Dropcap (Chapter
18); Left Marginal Callout, Right Marginal Callout (Chapter 19); Left Marginal
Alert, Right Marginal Alert (Chapter 20)