HTML and CSS Reference
In-Depth Information
The previous layout examples were made with fixed-width columns in
a fixed-width container and as a result are called
fixed-width layouts
.
Flexible columns based on percentages are called
liquid layouts
because
they flow to fit the dimensions of the browser. Liquid two-column
layouts can be just as easily made as their fixed counterparts. Moving
to three columns can be a bit trickier, especially when source order
considerations dictate the negative margin “jumping” column. This is
because percentage margins are calculated relative to the width of the
element the margin is applied to, not the containing block's width, so
unless the ratios of sizes of each column are simple, it may not be easy
to define what “a margin equal to the width of that other element” is.
Mixed-column-based layouts don't have a fancy name, but they consist
of both fixed-dimension columns and percentage or autowidth columns.
Sometimes these or other complex arrangements are accomplished by
nesting sets of containers and columns.
Figure 7.9
and the following code
illustrate a fixed-width right column and two additional columns that
grow to match the container width.
Figure 7.9
A mixed column
layout with two
flexible content
columns and
one fixed-width
sidebar.
.container {
width: auto;
padding: 5px 107px 5px 5px; /* room for right sidebar */
border: 1px solid black;
(continues on next page)
