HTML and CSS Reference
In-Depth Information
The number of
<div>
tags you use will vary from layout to layout. Some web designers
believe strongly in using only a minimum number of
<div>
tags, whereas others add
them freely whenever needed. The approach for this example is down the middle
between those extremes: There are enough to make it easy to illustrate how CSS-based
layout works but not so many that we're adding extraneous
<div>
tags just because we
can.
Figure 13.3 shows the new HTML page without any styles applied.
FIGURE 13.3
An unstyled page,
ready for layout.
Writing a Layout Style Sheet
With an HTML page ready for styling, the next step is to write the style sheet. There are
several questions to consider regarding how to lay out the page.
The first is a technical question: Will you use absolute positioning for layout, or will you
use floated columns? You can get the same general layout effects from both techniques.
Positioning is a little bit easier to grasp, at first, so this example uses absolute position-
ing. Later this lesson, however, you'll learn how to lay out the same HTML page with
the
float
property.
You need to figure out how many columns you want. There's a slight increase in com-
plexity when you have more columns, but the specific techniques remain the same
whether you're using two columns, three columns, or more. In this redesign, two
columns are used to avoid making the example overly complex.
