HTML and CSS Reference
In-Depth Information
You can use all the tools described in the “Building Blocks of CSS Layouts”
section of this chapter for creating the main layout grid for handling the
header, footer, and content areas of the page.
The most common approach, because of its flexibility with regard to
content lengths, source order, and markup structure, is to use some varia-
tion of the “float into margins” technique.
If you were to make the
.main
and
.floated
blocks earlier in the chapter
(Figure 7.3) wide enough, then you have a two-column layout. That isn't
all there is to do, however, because that example has two important
points of failure:
■
If the sidebar column is taller than the main content area, it will
escape the bottom bounds of the container and force the wrapping
of the following content such as the footer.
■
The code provided requires the floated element to appear before
the main content area in the source HTML document, which may
be undesirable.
Both problems can be solved with minor changes, as the following exam-
ple demonstrates (
Figure 7.7
).
Figure 7.7
The results of
changes to the
earlier two-
column layout.
