Switching Dimensions to Ems

Creating an elastic layout is not the same as just creating a liquid layout with ems in place of percentages for the dimensions. Ems are computed very differently from percentages, so it’s essential that you understand how they work before you can effectively create an elastic layout.

What is an Em?

If you read about the definition of the em in typography web sites and books, you may quickly become confused with all the jargon and history surrounding the term. Don’t worry about all that. In terms of CSS dimensions, an em simply means the font size of the current element. Jon Tan puts it well in his article “The Incredible Em & Elastic Layouts with CSS” (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css):