Pro HTML5 and CSS3 Design Patterns

CHAPTER 9 ■ POSITIONING: ADVANCED

Bottom Offset

Problem

You want to offset an element and its content from the bottom of its parent or closest

positioned ancestor.

Solution

To offset a bottom-aligned element from the bottom, you can assign a value other

than zero to margin-bottom. A positive value in margin-bottom offsets up (toward the

inside), and a negative value offsets down (toward the outside).

This design pattern is symmetrical to Top Offset except that it applies this pattern twice:

once to the element and once to the element’s content.

See the Bottom Aligned design pattern for details on how to top-align an element.

Patterns Bottom-offset sized static block

BLOCK-SELECTOR { position:static; height:+VALUE;

margin-top:auto; margin-bottom:±VALUE; }

Bottom-offset sized absolute element

SELECTOR { position:absolute; height:+VALUE;

margin-top:auto; margin-bottom:±VALUE;

top:auto; bottom:0; }

Bottom-offset shrinkwrapped absolute element

SELECTOR { position:absolute; height:auto;

margin-top:auto; margin-bottom:±VALUE;

top:auto; bottom:0; }

Bottom-offset stretched absolute element

SELECTOR { position:absolute; height:auto;
margin-top:0; margin-bottom:±VALUE;
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

apply this design pattern to the content to align it 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.

Example

The sized static block has a negative bottom margin that moves the shrinkwrapped

static block up and over it. The shrinkwrapped static block has a large bottom margin

that lowers the bottom of its parent. Notice how the example applies this pattern to the

sized and stretched absolute elements and to the spans within them.

Related to Top Offset, Bottom Aligned, Middle Offset