Chapter 12: CSS Layouts

---

Overview

Throughout the book, we've been talking primarily about the insides of web page elements—the guts. But what about the framework? For years, designers have relied on tables for structuring columnar layouts, oftentimes nesting multiple tables inside each other to achieve just the right amount of spacing or visual effect. These bloated layouts can be slow to download and slow to work with in terms of code maintenance—not to mention often unreadable in text browsers, screen readers, and small-screened devices.

In this chapter, we'll combine CSS and structured markup to create a two-column layout using four popular methods. In turn, we'll show that it's possible to create columnar designs without nested tables and spacer GIFs.

Later, in the "Extra credit" section, we'll discuss the box model problems found in Internet Explorer version 5 for Windows and how to get around it. We'll also share a simple secret for getting equal-length columns with CSS.

---