HTML and CSS Reference
In-Depth Information
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).
Elastic Layouts
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
