Project 1. Converting an Existing Page

Look inside a typical CSS [designer's] house. What do you see? Chairs, only chairs. No tables.

JEAN-YVES STERVINOU

For years upon years about eight of them, as this is being written we've been using tables and spacer images to lay out Web pages. For the first part of all those years, it was the only way to create compelling visual design. Tools grew up to support this desire, design firms embraced it wholeheartedly, and pages got more and more bloated as a result.

When CSS came along, there began to be some hope that the trend might reverse and that pages could get smaller and more meaningful. When CSS2 introduced positioning, the door was opened. It become theoretically possible to do almost everything that tables did and in a fraction of the page weight.

That was theory: The practice for at least a few years was very different, thanks to incomplete and incompatible browser implementations. That improved slowly until, by the dawn of the 21st century, positioned layouts were really held hostage only by the persistence of Netscape 4.x, and even there some simple positioning could be achieved.

A good way to get familiar with the basics of positioning layout is to take a table-driven layout and convert it to CSS positioning (CSS-P). This allows for comparisons between the document structures and serves as a primer in how basic positioning can make life a lot easier.