Section 11.1. How CSS Layout Works | Dreamweaver CS3: The Missing Manual

11.1. How CSS Layout Works

As discussed in Chapter 1, the limitations of HTML forced designers to develop clever ways to make their Web sites look good. The most common tool was the <table> tag, which was originally supposed to be used to create a spreadsheet-like display of information composed of rows and columns of data. Instead, designers used HTML tables to build a kind of scaffolding for organizing a page's contents (see Figure 11-1). But because the <table> tag wasn't meant for layout, designers often had to manipulate the tag in unusual wayslike placing a table inside the cell of another tablejust to get the effect they wanted. This method was a lot of work, added a bunch of extra HTML code, and made it very difficult to modify the design later. But before CSS, that's all Web designers had.

If you're a longtime <table> tag jockey, you need to develop a new mindset when you begin to use CSS for layout. First, forget about rows and columns (a notion that's important when working with tables). There are no column spans or row spans , and the grid-like structure of a table is nowhere to be found in CSS. You can, however, think of a <div> tag as a table cell. As with table cells , a <div> tag is the logical place to put content that you want to position in one area of the page. In addition, as you'll see, CSS designs often nest a div inside another div, much like you'd nest tables within tables to get certain effectsbut, fortunately, the CSS method uses a lot less HTML code.

Figure 11-1. Building a complex page design (left) using the <table> tag involves tricks like nesting tables within tables, merging adjacent cells, and propping open cells with invisible spacer images. It's like building a rigid scaffolding (right), and changing the design of a page requires tearing down the scaffolding and building a new one.

11.1.1. The Mighty <div> Tag

Whether you're using tables or CSS, Web page layout involves putting chunks of content into different regions of the page. With CSS, the element most commonly used for organizing content is the <div> tag. As you read in Section 1.2.1, the <div> tag is an HTML element that has no inherent formatting properties (besides the fact that browsers treat the tag as a block with a line break before and after it); instead, it's used to mark a logical grouping of elements or a division on the page.

You'll typically wrap a <div> tag around a chunk of HTML that belongs together. The elements comprising the logo and navigation bar in Figure 11-1 occupy the top of the page, so it makes sense to wrap a <div> tag around them. At the very least, you would include <div> tags for all the major regions of your page, such as the banner, main content area, sidebar, footer, and so on. But it's also possible to wrap a <div> tag around one or more additional divs. One common technique is to wrap the HTML inside the <body> tag in a <div>. Then you can set some basic page properties by applying CSS to that wrapper <div>. You can set an overall width for the page's content, set left and right margins, or center all of the page's content in the middle of the screen. (You'll get a chance to work with a wrapper <div> in the tutorial in Section 11.1.1.)

Once you've got your <div> tags in place, add either a class or ID to each one, which becomes your handle for styling each <div> separately. For parts of the page that appear only once and form the basic building blocks of the page, designers usually use an ID. The <div> tag for a page's banner area might look like this: < div id="banner"> . You can use an ID only once per page, so when you have an element that appears multiple times, use a class instead. If you have several divs that position photos and their captions, then you can create a style like this: <div class="photo"> .

With styles like these, you can position the various page elements. Using the CSS float property, you can position different blocks of content to the left or right of a page (or left or right edge of a containing block like another <div>).

WORD TO THE WISE
When More Isn't Better

Although divs are critical to CSS layout, don't go crazy pelting your page with divs. A common trap is to believe you must wrap everything on a Web page in a <div> tag. Say your main navigation bar is an unordered list of links (like the one described in Section 9.1.1). Because it's an important element, you may be tempted to wrap a <div> around it: <div id="mainNav"><ul> </ul></div> .

But there's no reason to add a <div> when the <ul> tag's just as handy. As long as the <ul> contains the main navigation bar links, you can simply add your ID style to that tag: <ul id="mainNav"> . An additional <div> is just unnecessary code.