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 ...

Get Flexible Web Design: Creating Liquid and Elastic Layouts with CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.