Pro HTML5 and CSS3 Design Patterns

CHAPTER 9 ■ POSITIONING: ADVANCED

Right Aligned

Problem You want to align an element and its content to the right side of its parent or closest
positioned ancestor.

Solution This design pattern is symmetrical to Left Aligned in every way.
To right-align content, assign text-align:right to the containing block.
To create a right-aligned sized element, you can use width:+VALUE to size it. You can
use margin-right:0 to align it to the right side. You can use margin-left:auto to
prevent it from aligning to the left side. For an absolute element, you can also use
right:0 to align the element to the right side and left:auto to prevent it from aligning
to the left side.
To create a right-aligned stretched element, you can use width:auto, margin-left:0,
and margin-right:0 to stretch its width to the sides of its container. For an absolute
element, you can also use left:0 and right:0 to stretch it to the left and right sides.
To create a right-aligned shrinkwrapped element, you can use width:auto,
left:auto, and margin-left:auto to shrinkwrap the width. You can use right:0 and
margin-right:0 to align it to the right side.

Patterns Right-aligned sized static block

BLOCK-SELECTOR { position:static; text-align:right;

width:+VALUE; margin-left:auto;

margin-right:0; }

Right-aligned stretched static block

BLOCK-SELECTOR { position:static; text-align:right;

width:auto; margin-left:0;

margin-right:0; }

Right-aligned sized absolute element

SELECTOR { position:absolute; text-align:right;

width:+VALUE; left:auto; margin-left:auto;

right:0; margin-right:0; }

Right-aligned shrinkwrapped absolute element

SELECTOR { position:absolute; text-align:right;

width:auto; left:auto; margin-left:auto;

right:0; margin-right:0; }

Right-aligned stretched absolute element

SELECTOR { position:absolute; text-align:right;

width:auto; left:0; margin-left:0;

right:0; margin-right:0; }

Location This pattern applies to all elements.

Limitations Stretched Absolute doesn’t work in Internet Explorer 6, but it does work in version 7.

Related to Left Aligned, Right Offset, Center Aligned; Static, Absolute (Chapter 7); Sized,
Shrinkwrapped, Stretched (Chapter 5); Aligned design patterns in Chapter 8