Only use ems for the total width of em-based layouts

Using the em unit to specify the width of a website layout is one of several ways of adding a bit of flexibility to your design. If you’re not familiar with em-based – or elastic – layouts, I wrote a bit more about how they work a few years ago in Fixed or fluid width? Elastic!.

The reason I’m bringing up em-based layouts is that I want to highlight two things that are often overlooked. One is setting a maximum width for the overall layout, the other is using percentages to specify the widths of child elements like columns.

I’ve already written an article explaining why not setting a maximum width can be a problem, so please see Specify a maximum width for em-based layouts for the details. In this article I’m going to show why using ems for the width of columns can also have problematic consequences.

Total width and column widths specified in ems

As an example layout I’ll use the final example from my tutorial on How to create a 3-column layout with CSS.

For that tutorial I used pixels to create a fixed width layout, but let’s give it an em-based width instead. Converting pixels to ems can be done by assuming that one em equals 16 pixels. Unless the user has changed their browser’s default font size that will be a correct assumption in most cases.

The layout converted to an em-based width with column widths in ems has the same overall width and the same column widths as the pixel-based layout (again, assuming that the browser’s base font size is 16px). But increase text size (text size, not page zoom) a bit and watch what happens – when the layout becomes wider than the browser viewport, floats start dropping below previous elements.

Total width specified in ems, column widths in percent

This isn’t always a major problem, but it can be avoided by using percentages instead of ems for column widths. That’s what I’ve done in the em-based width with column widths in percent example document.

Again, at a base font size of 16px and provided that the browser viewport is wide enough (960px) for the layout to fit, this will look the same as the fixed width and fully em-based examples. But if you try increasing text size the columns will not drop below each other but instead adapt to the available width. The same thing happens when you make the browser viewport narrower. More flexible and adaptable, and much less likely to cause a horizontal scrollbar to appear.

It is possible that this is not what you want. Sometimes letting floats drop can be a better choice, though I think most of the time making column widths in this kind of layout fluid is the better choice. For those cases where you really want to use a fixed width on a specific part of a layout it is generally because it has fixed width content, where using pixels for width would make more sense than using ems as in my first example.

Be aware of the difference and choose what is most appropriate

I’m not saying that you should never ever use ems for column widths. You do need to be aware of the effects of doing so however, and that doesn’t seem to be the case with most of the layouts that use ems for column widths I’ve seen in the wild.

Posted on January 10, 2011 in CSS