Converting an Existing Page

Project 1

Project files

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.

Errata

There are no known errata for this project.

Unless otherwise indicated, all contents of this site and the book More Eric Meyer on CSS are copyright Eric A. Meyer and New Riders Publishing. All Rights Reserved.