HTML and CSS Reference
In-Depth Information
This layout is a hybrid of techniques:
•
The overall page container is liquid, so text reflows as you resize the window.
•
The left and right columns (the main navigation and the related-links sections, respec-
tively) are positioned absolutely using ems. This gets around the source order problem
that can occur with floated layouts; it's as if we've placed the columns over the top of
the main content, and that content has been pushed in using
padding-left
and
padding-right
properties so that the text does not show underneath those two columns.
Figure 7-15 shows the net result.
Figure 7-15.
A simple but typical three-column layout
The main content is significantly larger (in terms of quantity) than the content in the side
columns, but the page layout holds together well, even when the window width is stretched
wide. As we explained earlier, when you position an element absolutely, you remove it from
the document flow and the outer containing element can collapse in underneath if no other
content is there to pad it out. If there
were
more content in the absolutely positioned block,
the situation in Figure 7-16 could occur.
