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

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