Web Design Garage

Chapter 18. Creating Liquid Layouts with CSS

Direct from Topic 17, liquid or expando layouts are layouts that automatically resize themselves to fit the visitor's browser window. However, while the previous topic covered tables-based liquid layouts, this topic shows you how to build liquid layouts with Cascading Style Sheets (CSS).

TIP As with fixed-width CSS layouts, you'll want to set the leftmargin, topmargin, marginheight, and marginwidth attributes to 0 in the body tag so that your mathematics add up correctly across browsers.

Start with a sketch of the layout, like the one in Figure 18.1. CSS layouts don't require nested tables, so you don't have to worry about those. Just break down the design into rectangular areas. Each of these becomes ...