CHAPTER 9 ■ POSITIONING: ADVANCEDRight Offset
Problem You want to align an element and its content to the right side of its parent or closest
positioned ancestor.
Solution To offset a right-aligned element from its right side, you can assign a value other than
zero to margin-right. A positive value in margin-right offsets to the left (toward the
inside), and a negative value offsets to the right (toward the outside). This design
pattern is symmetrical to the Left Offset pattern in every way.
See the Right Aligned design pattern for details on how to right-align an element.
Patterns Right-offset sized static block
BLOCK-SELECTOR { position:static; text-align:right;
width:+VALUE; margin-left:auto;
margin-right:±VALUE; }
Right-offset stretched static block
BLOCK-SELECTOR { position:static; text-align:right;
width:auto; margin-left:0;
margin-right:±VALUE; }
Right-offset sized absolute element
SELECTOR { position:absolute; text-align:right;
width:+VALUE; left:auto; margin-left:auto;
right:0; margin-right:±VALUE; }
Right-offset shrinkwrapped absolute element
SELECTOR { position:absolute; text-align:right;
width:auto; left:auto; margin-left:auto;
right:0; margin-right:±VALUE; }
Right-offset stretched absolute element
SELECTOR { position:absolute; text-align:right;
width:auto; left:0; margin-left:0;
right:0; margin-right:±VALUE; }
Location This pattern applies to all elements.
Limitations Stretched Absolute doesn’t work in Internet Explorer for versions prior to 7.
Related to Left Offset, Right Aligned, Center Offset; Offset and Aligned design patterns in
(Chapter 8)