Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Chapter 4. Building Liquid Layout Structures

Throughout this chapter, I’ll demonstrate a variety of liquid layout methods using simple web page examples. Each one will rely on CSS floats to create multiple columns. The methods differ in how easy the CSS is to remember and apply, how many extra divs or hacks are required, what order the divs need to appear in the (X)HTML, and other relative advantages and disadvantages, so you have the option of picking the one that best fits with your comfort level and your site requirements. At the end of the chapter, we’ll apply what we’ve learned from some of these methods to a hands-on exercise: building a page of our Beechwood Animal Shelter site.

Preparing the Page for CSS Layout

The steps involved in preparing ...