Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Equal height excerpts with ems

Andrea Arbogast | 16 December 2006

CSS gives us a couple of well-tested ways to set up layout columns. But what if, along with controlling the width of your columns, you'd also like to control the height of elements in your layout? This is much harder to do, since the amount of text an element contains is often dynamic and unpredictable, as is the size of text in any specific user's browser. However, I have found that by specifying font sizes, line heights, and any vertical spacing with ems, I am able to create equal height boxes for my layouts that hold up even when users adjust their browser font sizes.

The crux of the technique is to specify the height of the containing box in ems, and use overflow: hidden to hide any text that would flow beyond the specified height of the box.

View an example of three equal-height article excerpts.

The important CSS rules in the example are:

div.layout * { margin: 0; padding: 0; } div.layout h1 { font-size: 1em; line-height: 1.3; margin-bottom: 0.3em; } p { font-size: .8em; line-height: 1.5; } div.layout div { height: 10em; overflow: hidden; }

First, margins and padding are removed from all elements inside the layout divs so we can take full control of them. Then, we use ems to specify the font sizes and margins of the titles and excerpts, which are grouped together into divs, and set line heights. Lastly, the height of the containing div is set to a value that breaks between lines of text. This height can be calculated mathematically or by trial and error. Increasing or decreasing browser font sizes does not affect the relationships of the boxes, making this a bulletproof technique that can be used with static or liquid layouts.1

This technique is designed to hide text that flows beyond the specified height of the containing box—notice that there is much more text in the excerpts than shows in the example. Because of this, it is easiest to use this technique with copy that can be excerpted, as in the example, or with text that has a predetermined character limit. This may be too restrictive for many situations, but this technique is a useful tool for your arsenal and can be very effective in grid-based designs.

1 Occasionally, when browser font sizes are increased, rounding errors cause the containing box to break so that it cuts through the last line of text, especially if elements with different font sizes are contained. Text is usually still readable, however.

References

About the Author

I am a web developer now living in Beijing, China. My day job is turning graphic design into standards compatible pages, service for Yahoo! China. In my spare time I blog about web standards, translate some English article into Chinese, promote web standards in China.

Articles by Andrea Arbogast

3 Comments

| Post a comment | Comments Feed

  1. reesereese�s site :

    16 December 2006, 05:54 : Permanent link to comment

    This is really great. I can see it being very useful in some of the dynamic work I do.

  2. Bob JonkmanBob Jonkman�s site : http://

    18 December 2006, 20:40 : Permanent link to comment

    Hi: Good tip! But if heights are going to be based on font size, then I would use the unit ‘ex’ rather than ‘em’. I believe (but have no proof) that this should result in more consistent text display inside a sized box.

    http://www.w3.org/TR/CSS21/syndata.html#value-def-length

    —Bob.

  3. AndreaAndrea�s site : http://interllectual.com

    19 December 2006, 03:53 : Permanent link to comment

    Hi Bob,

    Good point. I’ll have to test with exs and see how they fare. I seem to remember them being less consistent across browsers, but that was a long time ago. I’ll report back with what I see. :)


Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors