Pro HTML5 and CSS3 Design Patterns

CHAPTER 9 ■ POSITIONING: ADVANCED

Left Offset

Problem

You want to offset an element and its content from the left side of its parent or closest

positioned ancestor.

Solution

To offset a left-aligned element from its left side, you can assign a value other than zero

to margin-left. A positive value in margin-left offsets to the right (toward the inside),

and a negative value offsets to the left (toward the outside). This design pattern is

symmetrical to the Right Offset pattern in every way.

See the Left Aligned design pattern for details on how to left-align an element.

Patterns Left-offset sized static block

BLOCK-SELECTOR { position:static; text-align:left;
width:+VALUE; margin-left:±VALUE; margin-right:auto; }

Left-offset stretched static block

BLOCK-SELECTOR { position:static; text-align:left;
width:auto; margin-left:±VALUE; margin-right:0; }

Left-offset sized absolute element

SELECTOR { position:absolute; text-align:left;
width:+VALUE; left:0; margin-left:±VALUE;
right:auto; margin-right:auto; }

Left-offset shrinkwrapped absolute element

SELECTOR { position:absolute; text-align:left;
width:auto; left:0; margin-left:±VALUE;
right:auto; margin-right:auto; }

Left-offset stretched absolute element

SELECTOR { position:absolute; text-align:left;
width:auto; left:0; margin-left:±VALUE;
right:0; margin-right:0; }

Location This pattern applies to all elements.

Limitations
Stretched Absolute patterns don’t work in Internet Explorer for versions prior to 7. Inline
text can’t extend outside a sized block in Internet Explorer version 6 or 7.

Related to Left Aligned, Right Offset, Center Offset; Offset and Aligned design patterns in Chapter 8