HTML and CSS Reference
Figure 7-10. Be careful when adding widths of floated items; if they add up to more than 100
percent, wrapping like this can occur.
Tip You may have wondered why we included both a content-wrapper and a content-inner div —
why not just one container for the content? This is a simple workaround to a problem you'll encounter when
calculating widths of elements, especially when using a flexible design. When you're adding padding to an
area, such as around the text in the main content, padding adds to the widths you've defined and may take
the total over 100 percent. It is often much less problematic to use an outer container on which you specify
the width, and then apply the padding, border, or margin properties on the inner container. That way, these
properties can work independently and won't cause issues with calculating widths. Purists might argue that
adding another div is a waste of markup, but we feel it is a minor inconvenience to make the CSS work
cross-browser. As long as you use sensible id attributes for these div s, it's a highly practical compromise.
The issue is related to how browsers understand the Box Model, which defines how the width of content in
a block-level element is calculated and rendered alongside borders, margins, and padding widths. Earlier
versions of IE got the calculation wrong, thus causing untold problems for cross-browser designs. We dis-
cuss the Box Model problem—and the hack that solves a lot of the problems associated with it—in Chapter 6
(we also present a hack-less alternative).
As you learned from the previous example, with the liquid layout the browser window is stretched
wide and the content becomes difficult to read. What you really want is a page width that works