HTML and CSS Reference
In-Depth Information
Figure 6.21
A two-column page
configured using
CSS
Go to the end of the
book for a full color
version of this figure
Figure 6.22
The two-column
page layout
The page contains a number of elements, as shown in Figure 6.21. Compare the wire-
frame sketch in Figure 6.22 with the page displayed in Figure 6.21 (shown also in the
color insert section).
The page is designed with a number of boxes that correspond to the following page
areas: wrapper, left column, right column, logo, content, right-floating image, and
footer. Each of these areas will correspond to a class or id configured using CSS. The
key to this layout is that the left column is coded to float to the left using float:left .
With the left column navigation area floating to the left, the browser renders the other
content down the page using normal flow. In the next Hands-On Practice you will code
the XHTML and CSS to create the page shown in Figure 6.21.
Search WWH ::




Custom Search