CHAPTER 17 ■ LAYOUTSOUTSIDE-IN VS. INSIDE-OUT DESIGN
Fluid layouts are designed from the outside to the inside. This is because you start with the width of the
viewport and divide its width among elements using percentages, minimum widths, and maximum widths.
The problem is that the width property sets the inner width of an element. Padding, borders, and margins
surround the inner width of an element and thus increase its outer width. Because CSS doesn’t have an
outer-width property, CSS requires you to design from the inside to the outside. The result is that margins,
borders, and padding can break fluid layout designs.
For example, you may want to float two elements to the left and assign each to width:50% so they’re
positioned side by side and evenly divide the width of the viewport. The first two divisions in the example
show how this works. No matter how you resize the viewport, these elements stay positioned side by side
(until their minimum width no longer allows them to fit within the width of the viewport).
If you assign any margins, borders, and padding to these two side-by-side floats, the floats no longer fit
within the width of the viewport. For example, if you assign a 1-pixel border around each of them, their
total outer width exceeds the width of the viewport by 4 pixels (1 pixel for the left and right sides of each
element). When floats don’t fit side by side within their container, they wrap to the next line. This isn’t what
you want! The second set of divisions in the example shows how a tiny 1-pixel border can break the fluid
layout. No matter how you resize the viewport, the floats will not fit side by side.
To fit two elements with margins, borders, and padding within their container, you have to reduce the
percentage width of each element, but by how much? If you assign percentages to margins and padding,
you can simply subtract each of their percentages from the percentage you assign to the width. For
example, if you assign a 5% left margin to each of two elements, you can assign a width of 45% to each
element. This is demonstrated by the third set of divisions in the example. No matter how you resize the
viewport, these elements stay positioned side by side (until their minimum width prevents them from fitting
in the viewport).
Per the CSS specification, browsers ignore percentages assigned to borders, which means you must use a
fixed measurement to create borders. It’s also unusual to assign percentages to margins and padding
because margins and padding typically look better when they don’t resize with the viewport. You can
resize the example to contrast the behavior of percentage margins and fixed margins.
In fluid layouts, assigning fixed margins, borders, and padding to an element isn’t compatible with a
percentage assigned to its width. As the viewport shrinks, percentages shrink the width of an element, but
its fixed margins, borders, and padding don’t shrink. For example, given a viewport width of 1000 pixels
containing two side-by-side child elements where each has 5-pixel left margins, the available width is 990
pixels, or 99%—that is, (1000px – 5px – 5px) / 1000px. If you were to divide this equally among the two
elements, you would assign width:49.5% to each. Given a viewport width of 100 pixels, the available
width is 90 pixels, or 90%—that is, (100px – 5px – 5px) / 100px. To divide that equally among the two
elements, you would assign width:45% to each. Thus, mixing fixed margins, borders, and padding with
percentage widths doesn’t work in fluid layouts. In the example, the fourth set of divisions is set to 49.5%,
with left margins set to 5 pixels. The screenshot is taken at 750 pixels wide, which isn’t wide enough for
them to fit side by side; but if you enlarge the browser window to 1000 pixels or more, they fit.
Note that Internet Explorer 7 and earlier versions don’t quite play by the rules. When floating two elements
set to width:50%, Internet Explorer guesses you want them to be side by side, so it breaks the rules and
puts them side by side. All other major browsers behave properly. Furthermore, Internet Explorer 6 has