Chapter 1. Understanding Flexible Layouts

The term “flexible layouts” can mean different things to different people, so let’s make sure we’re all on the same page before we dive into designing and building them. In this chapter, you’ll learn the defining characteristics of each of the main layout types—fixed-width, liquid, elastic, and hybrid—described in the Introduction. We’ll focus on the benefits and pitfalls of each so that you can decide which type might be right for your particular site.

Types of Layouts

We can group web-page layouts into three categories based on how their width is set: fixed-width, liquid (or fluid), and elastic. It’s also possible to combine these layouts into hybrid layouts by mixing units of measurements; each column ...

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

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.