HTML and CSS Reference
In-Depth Information
The example files for the one-, two-, and three-column layouts in the first half of this chapter contain
Internet Explorer conditional comments to fix problems with IE 6. The main issues are the lack of support for
max-width and occasional rounding errors with percentage widths. If you still need to support IE 6, please refer
to the comments in the example files for an explanation of issues that need to be fixed.
Using Floats for a Two-column Layout
When it comes to using two columns, you have considerably more choices than a single-column layout. Most
layouts consist of a header and footer, with the main content and a sidebar in the center, all contained in a
wrapper <div> , as shown in Figure 12-2 .
Main content
Figure 12-2. A typical two-column layout consists of four main areas
Obviously, this is a highly simplified view of page layout. For example, it doesn't show the site navigation. I'm
assuming it goes right across the page, in which case it can be counted as part of the header, or is in the sidebar.
Figure 12-2 shows the sidebar on the left, but as you saw in Chapter 7, it's easy to switch it from one side of the
page to the other with CSS.
Displaying elements that extend the full width of the wrapper<div> is straightforward. The challenge lies
in creating the columns. There are several techniques for achieving the layout shown in Figure 12-2 . All have
different advantages and drawbacks.
Let's start by recapping the technique used in Chapter 7—floating the sidebar to one side and putting a wide
margin on the wider column to make room for it. The following section also discusses how to create equal height
columns, an issue that's relevant to all layout techniques.
Search WWH ::

Custom Search