Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Outside-in Box

Alias Outer Width

Problem You want to set the outer width of a float, an absolute, or a static element to a specific
measurement or percentage. You don’t want margins, borders, and padding to increase the
outer width. This is a problem because CSS doesn’t provide an outer-width property. The
width property is the inner width of an element; and margins, borders, and padding expand
the outer width.

Solution Instead of assigning margins, borders, and padding to an element, you can assign them to
an embedded element. Because the outer element doesn’t have margins, borders, and
padding, its outer width is its inner width. This lets you set its outer width using width.
I call the embedded element the outside-in box because it moves the margins, borders, and
padding from the outside of the box to the inside. In the example, I identify outside-in boxes
using a class named oi.
The outside-in box must be stretched to fill the width and height of its parent so its margins,
borders, and padding are indented inside its container. (You could also use negative
margins to outdent the outside-in box.) A block element or an inline element displayed as a
block makes a great outside-in box because a browser automatically stretches it.

Application When creating layouts, you often need to set the outer width of child elements to a
percentage of the width of their parent. For example, you may want each of two floats in a
container to be set to 50% of the container’s width. If you apply margins, borders, or
padding directly to these floats, their outer width expands to more than 50%. This causes the
second float to move below the first float instead of beside it. You can solve this problem by
applying margins, borders, and padding to embedded outside-in boxes.
This pattern is essential when using percentages to lay out elements in fluid layouts because
it’s impossible to anticipate in advance what percentage assigned to width will compensate
for fixed margins, borders, and padding.

Pattern^

HTML

CSS SELECTOR { width:PERCENT; min-width:+VALUE; }
SELECTOR .oi { margin:+VALUE; border:WIDTH STYLE COLOR;
padding:+VALUE; background:STYLES; display:block; }

Location This pattern works anywhere.

Limitations This pattern doesn’t apply to tables. It also doesn’t apply to outer height because a static
block box’s height shrinkwraps instead of stretches.

Related to Fluid Layout; Display, Box Model, Block Box (Chapter 4); Width, Stretched (Chapter 5);
Margin, Border, Padding, Background (Chapter 6); Blocked (Chapter 11)