CHAPTER 9 ■ POSITIONING: ADVANCEDLeft Aligned
Problem You want to align an element and its content to the left side of its parent or closest
positioned ancestor.
Solution To left-align content, assign text-align:left to the containing block.
To create a left-aligned sized element, you can use width:+VALUE to size it. You can use
margin-left:0 to align it to the left side. You can use margin-right:auto to prevent it
from aligning to the right side. For an absolute element, you can also use left:0 to align
the element to the left side and right:auto to prevent it from aligning to the right side.
To create a left-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 left-aligned shrinkwrapped element, you can use width:auto, right:auto,
and margin-right:auto to shrinkwrap the width. You can use left:0 and margin-left:0
to align it to the left side.Patterns Left-aligned sized static block
BLOCK-SELECTOR { position:static; text-align:left;
width:+VALUE; margin-left:0;
margin-right:auto; }
Left-aligned stretched static block
BLOCK-SELECTOR { position:static; text-align:left;
width:auto; margin-left:0;
margin-right:0; }
Left-aligned sized absolute element
SELECTOR { position:absolute; text-align:left;
width:+VALUE; left:0; margin-left:0;
right:auto; margin-right:auto; }
Left-aligned shrinkwrapped absolute element
SELECTOR { position:absolute; text-align:left;
width:auto; left:0; margin-left:0;
right:auto; margin-right:auto; }
Left-aligned stretched absolute element
SELECTOR { position:absolute; text-align:left;
width:auto; left:0; margin-left:0;
right:0; margin-right:0; }
Location This pattern applies to all elements.
Limitations Stretched Absolute^ patterns don’t work in Internet Explorer prior to version 7.
Related to Left Offset, Right Aligned, Center Aligned; Static, Absolute (Chapter 7); Sized,
Shrinkwrapped, Stretched (Chapter 5); Aligned design patterns in Chapter 8