Page 1 of 2 In The Many Uses of the Malleable em, I described what the em unit of measurement stands for when used in the font-size, margin and padding properties of CSS. As you learned there, the em unit can be used for a lot more than sizing text. In this article, you'll learn another use of the em unit: as a width measurement to create layouts that resize according to the user's font size.
Layouts that resize based on font size may seem like a strange and useless web trick. Most layouts on the web come in one of two flavors: fixed/static or liquid/fluid.
A fixed layout has widths assigned in pixels, so no matter what size the browser window is, the layout remains the same. This means the layout elements and content can be more precisely placed, but fixed layouts can lead to horizontal scrollbars on any browser window smaller than what the designer has picked as optimal, lots of wasted screen real estate in any window larger than what the designer has picked, and a decidedly cramped feeling if the user has a large text size.
A liquid layout has widths assigned in percentages, which are relative to the viewport size, so the layout adjusts to the size of the user's browser window. This means users don't have to horizontally scroll to access content and layouts can take advantage of all the screen space, but lengths of lines of text can become unwieldy and layouts cannot be planned with precision.
A third layout option that is sometimes used is the elastic layout, which resizes based on the font size. Although none of these layout options is a perfect fit for any situation — choose your layout type based on the needs of the project at hand — elastic layout does have some neat advantages:
If you decide that elastic design is appropriate for a piece of your page or the whole layout, this article will show you how to implement it.
You may have also heard of a jello layout. This is a specialized type of liquid layout where the layout is still dependent on the viewport size but only down to a certain minimum width and up to a certain maximum width, after which it becomes fixed width. Many layouts are also hybrids of fixed, liquid, and elastic layouts because they mix units of measurement between columns. So many choices! But here we're just going to go over elastic layout.
We'll be working with some example files in this tutorial, so click on the Download Support Files link at the bottom of the page to download the examples on to your computer. Be ready to open them up in Dreamweaver and preview them in both Firefox and Internet Explorer.
To see how ems can be effectively used as the unit of measurement for width, first open box-pixels.htm in your browser. There is an orange box on the page acting as a feature ad or promotional piece. If your browser is set up to display text at the default size of 16 pixels, the text of the feature box will fit nicely on two lines within the rigid 160px width of the box. But if your text is set just a bit bigger than 16 pixels, both lines of text will break, giving a much less graceful appearance.
Image 1: At the default font size, the text fits in the pixel-sized
box well (left image), but if a user has a larger default or sizes their
text up on the page, the text breaks awkwardly (right image).
Sizing the box in percentages doesn't help. Open box-percentages.htm. If you're running a browser window that is about 850 pixels wide, the text fills the box nicely. But try resizing the browser window and notice how the box immediately changes in size. The box is too long when the browser window is large and too short when the window is small.
Next open box-ems.htm in your browser. Try resizing the window and notice how the box stays the same size. Now try resizing your text (in Firefox, just hit Ctrl + or - to size up or down, respectively). This time, the box doesn't stay the same size — it grows as the text does. This means the text doesn't break awkwardly. Instead, you get the same amount of text on each line no matter what the text size.
The way this is accomplished couldn't be simpler. Open box-ems.htm in Dreamweaver and go to Code View. You'll see this rule:
#box {
float: right;
width: 13em;
margin: 0 0 15px 15px;
padding: 1em;
border-top: 3px solid #f60;
border-bottom: 1px solid #f60;
background: #FFDC9B;
}
I've highlighted the pertinent part in the CSS rule: The width of the box has been set to 13em. This one line is all that's needed to create an elastic box.
Why is 13 the magic number here? Remember that an em corresponds to the size of the font, which itself is equivalent to the height of the font. Since this height extends all the way from the bottom of the characters' descenders (eg, the tail on the "y") to the top of the ascenders, an em is larger than the width of the average character. In fact, an em roughly equals twice the average width of the font's characters. This means that if you want to fit 100 characters across a line, you only need about 50 ems to do so, since each em can "hold" two characters.
So, to figure out about how wide to make a box in ems, count the characters that you want to fit all on one line, then divide by two. In the case of this example, there were two lines of text, each with a different font size and a different number of characters that needed to fit. The top line only needed about 14 characters because of its large text size. The bottom line needed about 26. I used the piece of text that was at the same font size as its parent, the bottom line, to base the em width off of. This is because when em is used on any property other than font-size, it gets its size from the font size of the parent of the element on which it is being used. So if you set a width in ems, the browser will figure out how big each em is by looking at the parent element's font size. In this case, the parent is the body element and the body's font size will determine how large an em on #box is. Since the second line of text in the box uses the same font size as that used on the body, I can use this text as a measurement for the number of characters. Thus, I halved 26 and set the width at 13em. Since an em is not an exact measurement, I then tested in my browsers to make sure it displayed how I wanted.
Because ems aren't an exact measurement, they do not control the number of characters or words that will appear on a line with absolute precision. You can see this in the example page by scaling the text down two notches in Firefox — the word "2006!" drops down to a third line. So, it's not perfect, but it's pretty dang close. By and large, the amount of words on a line will stay that way no matter what size the user chooses.
In real use, you'll rarely count the exact number of characters to figure out an appropriate em width. Instead, you'll just guess at the number of characters, guess at the corresponding em width, and test it in a browser to see how it comes out. If you've missed, just tweak the value up and down until you get what you're looking for. This whole educated guessing process will probably only take you 30 seconds, so there's no harm in using such a casual method!
Keywords
CSS, cascading style sheets, stylesheets, em unit, ems, width, page layout, columns, divs, boxes, elastic, scalable, zoomable
