Pro HTML5 and CSS3 Design Patterns

CHAPTER 9 ■ POSITIONING: ADVANCED

Bottom Aligned

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

Solution This design pattern is symmetrical to Top Aligned except that it applies this pattern twice:
once to the element and once to the element’s content.
To create a bottom-aligned sized element, you can use height:+VALUE to size it. You
can use margin-bottom:0 to align it to the bottom. You can use margin-top:auto to
prevent it from aligning to the top. For an absolute element, you can also use bottom:0 to
align the element to the bottom and top:auto to prevent it from aligning to the top.
You can’t bottom-align a static shrinkwrapped element because normal flow
determines its position.
To create a bottom-aligned shrinkwrapped absolute element, you can use bottom:0
and margin-bottom:0 to align it to the bottom. You can use height:auto, top:auto, and
margin-top:auto to shrinkwrap the height.
To create a bottom-aligned stretched element, you can use height:auto, margin-
bottom:0, and margin-top:0 to stretch its height to the bottom and top of its container.
For an absolute element, you can also use bottom:0 and top:0 to stretch it.

Patterns Bottom-aligned sized static block

BLOCK-SELECTOR { position:static; height:+VALUE;
margin-top:auto; margin-bottom:0; }

Bottom-aligned sized absolute element

SELECTOR { position:absolute; height:+VALUE;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }

Bottom-aligned shrinkwrapped absolute element

SELECTOR { position:absolute; height:auto;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }

Bottom-aligned stretched absolute element

SELECTOR { position:absolute; height:auto;
margin-top:0; margin-bottom:0;
top:0; bottom:0; }

Location This pattern applies to all elements.

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

Tip There is no property to align content to the bottom of its container. Instead, you need to
use this design pattern to align content to the bottom of its parent. See the absolutely
positioned spans in the example. Note that when a parent is shrinkwrapped, positioning
its content collapses its height.

Related to Top Aligned, Bottom Offset, Middle Aligned; Static, Absolute (Chapter 7); Sized,
Shrinkwrapped, Stretched (Chapter 5)