Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Chapter 5. Building Elastic Layout Structures

Each of the techniques for liquid layouts that we discussed in the previous chapter can be adapted to work for elastic layouts. Sometimes it’s as easy as changing percentage dimensions to ems. However, the way that nested em measurements are computed differs from that of percentages, so a simple one-to-one switch doesn’t always work. In this chapter, you’ll learn what an em is, how it’s computed, and how to choose proper em measurements for your sites. We’ll apply this knowledge of ems to adapt the liquid layouts from the previous chapter. In the exercise at the end of the chapter, we’ll create the structure of the Beechwood Animal Shelter home page.

Switching Dimensions to Ems

Creating an elastic layout ...