O'Reilly logo

Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by Zoe Mickley Gillenwater

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required