Pro HTML5 and CSS3 Design Patterns

CHAPTER 5 ■ BOX MODELS EXTENTS

Shrinkwrapped

Problem You want to shrinkwrap the width and/or height of an element to fit the width or height of its
content.

Solution Apply styles to your chosen class or ID as follows:
Use height:auto to shrink the height to the height of all its lines.
Use width:auto to shrink the width to the width of its widest line.
width and height are independent. For example, you can shrinkwrap one and size theother.

Patterns Shrinkwrapped Float^
SELECTOR { width:auto; height:auto; float:LEFT_RIGHT; }

Shrinkwrapped Static Inline Element

INLINE-SELECTOR { width:auto; height:auto; }

Shrinkwrapped Static Inline-block Element

INLINE-BLOCK-SELECTOR { width:auto; height:auto; }

Vertically Shrinkwrapped Static Block Element

BLOCK-SELECTOR { height:auto; }

Shrinkwrapped Table Element

TABLE-SELECTOR { width:auto; height:auto; }

Horizontally Shrinkwrapped Absolute Element

SELECTOR { position:absolute; width:auto;

left:0; right:auto; }

or

SELECTOR { position:absolute; width:auto;

left:auto; right:0; }

Vertically Shrinkwrapped Absolute Element

SELECTOR { position:absolute; height:auto;

top:0; bottom:auto; }

or

SELECTOR { position:absolute; height:auto;

top:auto; bottom:0; }

Location This pattern applies to all elements.^

Limitations You cannot horizontally shrinkwrap a static block.

Explanation Shrinkwrapped elements require width and height to be set to auto so that the browser can
automatically size the box based on the width and height of its content. Absolute elements also
require left or right, and top or bottom to be set to auto to prevent them from being stretched.

Tip Because a shrinkwrapped table is sized based on its content, its behavior is the same as any other
shrinkwrapped element. Contrast this to a sized table where the height and width are assigned to
the outside of the table’s border, causing it to be sized differently from other elements.
Another way to constrain the size of a block is using the max-height or max-width CSS properties.