CSS: The Missing Manual

Chapter 11. Building Float-Based Layouts

CSS leads a double life. As great as it is for formatting text, navigation bars, images, and other bits of a Web page, its truly awesome power comes when you're ready to lay out entire Web pages.

CSS layout comes in two flavors— absolute positioning and floats. Absolute positioning lets you position an element anywhere on the page with pixel-level accuracy—or so the theory goes. This kind of total control is exciting, as you'll see in the next chapter, but actually very difficult to achieve. That's why the vast majority of Web pages use float-based layouts, which are the subject of this chapter.

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 ways—like placing a table inside the cell of another table—just 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 ...