Using Ems for More than Font Size

It is common practice to use the em unit to specify font sizes in CSS. What I have not seen very often is using ems to specify other styles like width. For example, say you have a fixed width menu specified with the following style:

div.menu
{
   width: 175px;
   font-size: 1.1em;
}

This is good practice since you or the end user can change the font size of the page and the font size of your menu will change accordingly. However, since the width of your menu is fixed, the text may wrap as font size increases. An alternative style would be:

div.menu
{
   width: 10em;
   font-size: 1.1em;
}

Specifying the width in ems forces the width to be relative to the font size. Therefore as the font size of your page increases, the absolute width of your menu increases as well.

For more information on using ems for widths check out this article on the css-discuss Wiki.