Creating a Website: The Missing Manual, 3rd Edition

Style-Based Layout

In the early, lawless days of the Web, designers had to improvise their layout tools. One of their favorite tricks was the invisible table, which uses the <table> element you learned about in Chapter 5 to position rows and columns of content. Although invisible tables worked well enough, they left a tangled mess of markup in their wake. Today, web developers have largely given up on table-based layouts in favor of a cleaner and more powerful approach: style-based layout.

You’ve already taken your first tentative steps toward style-sheet nirvana by learning about style-based layout for boxed text and floating images in Chapter 7. You can apply that same idea to full pages. But before you go any further, it’s a good idea to review the basic concepts that make style-based layouts possible.

Structuring Pages with the <div> Element

Before you start placing elements in specific positions on a page, you need a way to bundle related content into a single, neat package. In the table-based layout examples above, that package was the table cell. When you use style-based table layout, that package is the <div> element—the all-purpose container described on Divisions and Spans.

Imagine you want to create a box with several links on the left side of your page. Positioning each link in that column is as much fun as peeling grapes. By using the <div> element, you can group everything together:

<div class="Menu"> <a href="...">Home Page</a> <a href="...">Buy Our Products</a> <a href="...">File ...