Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned Outside

Problem

You want to align an element to the outside of its container. For example, you

want to align the left side of an element to the right side of its container, or vice

versa. Or you want to align the bottom of an element to the top of its container,

or vice versa.

Solution

You can align an absolute element to the outside of any of the four sides of its

closest positioned ancestor. Because 100% is the width of an element’s

container, offsetting an element 100% from one side aligns it to the outside of

the other side. In addition, you can use margin to offset the element further. An

aligned-outside absolute element can be sized or shrinkwrapped.

You can align static blocks and floats to the outside left or right sides of their

parent, but not to the top or bottom. They must be sized. The technique

described previously can align blocks and floats to the outside right, but not to

the outside left. To align blocks and floats to the outside left, you need to put the

negative of the element’s outer width in margin-left. The outer width is the

inner width plus left and right padding and borders.

Patterns

Sized Block Aligned Outside Left

SELECTOR { width:INNER; margin-left:-OUTER; }

Sized Block Aligned Outside Right

SELECTOR { width:INNER; margin-left:100%; }

Sized Float Aligned Outside Left

SELECTOR { width:INNER; margin-left:-OUTER; float:left; }

Sized Float Aligned Outside Right

SELECTOR { width:INNER; margin-left:100%; float:left; }

Absolute Aligned Outside Left

SELECTOR { right:100%; margin-right:±OFFSET; position:absolute; }

Absolute Aligned Outside Right

SELECTOR { left:100%; margin-left:±OFFSET; position:absolute; }

Absolute Aligned Outside Top

SELECTOR { bottom:100%; margin-bottom:±OFFSET; position:absolute; }

Absolute Aligned Outside Bottom

SELECTOR { top:100%; margin-top:±OFFSET; position:absolute; }

Location This pattern applies to all elements when positioned absolutely.

Limitations

You can’t align inline elements to the outside of their containers. You can’t align

static blocks or floats to the outside top or bottom of their containers. Internet

Explorer 6 can’t outside-align static blocks and floats, but later versions can.

Related to

Aligned and Offset Absolute; Sized, Shrinkwrapped (Chapter 5); Flyout Menu

(Chapter 17)