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