CSS Master, 3rd Edition

Chapter 5: Layouts

CSS layouts have come a long way in the last decade. In an earlier era of the Web, we wrestled and wrangled <div> tags or used heavy CSS frameworks that relied on floats and clearing. Or we threw a bunch of JavaScript at them. These days, it’s much easier to create the kinds of complex layouts that used to require nested elements, extensive knowledge of browser quirks, or expensive DOM operations.

In this chapter, we’ll look at several aspects of CSS layout. In the first half, we’ll review some of the basics: normal flow, floated elements, and how to clear floats. We’ll follow that up with refreshers on both the box model and stacking context. Understanding these concepts helps us diagnose and fix layout bugs.

In the second ...