Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned and Offset Absolute

Problem You want to align an absolutely positioned element to the left, right, top, or bottom of its
closest positioned ancestor. You also want to offset it from its alignment. You also want to
size or shrinkwrap the element.

Solution Apply styles to your chosen class or ID as follows:^

Use width:+VALUE and height:+VALUE to size the element.

Use width:auto and height:auto to shrinkwrap the element.

To offset from the left side:

Use left:0 and right:auto to align an element to the left.

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 offset from the right side:

Use right:0 and left:auto to align an element to the right.

Use margin-right:+VALUE to offset the element to the left of the right side.

Use margin-right:-VALUE to offset the element to the right of the right side.

To offset from the top:

Use top:0 and bottom:auto to align an element to the top.

Use margin-top:+VALUE to offset the element below the top.

Use margin-top:-VALUE to offset the element above the top.

To offset from the bottom:

Use bottom:0 and top:auto to align an element to the bottom.

Use margin-bottom:+VALUE to offset the element above the bottom.

Use margin-bottom:-VALUE to offset the element below the bottom.

Patterns Left-offset Absolute Element
SELECTOR { position:absolute; left:0; right:auto;
margin-left:±VALUE; margin-right:auto; }

Right-offset Absolute Element

SELECTOR { position:absolute; left:auto; right:0;

margin-left:auto; margin-right:±VALUE; }

Top-offset Absolute Element

SELECTOR { position:absolute; top:0; bottom:auto;

margin-top:±VALUE; margin-bottom:auto; }

Bottom-offset Absolute Element

SELECTOR { position:absolute; top:auto; bottom:0;

margin-top:auto; margin-bottom:±VALUE; }

Location This pattern applies to all elements.