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
Equal height excerpts with ems
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
- Line Height
- An alternative method: Equal height boxes with JavaScript
- Five simple steps to designing grid systems
3 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
reese
:
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.
Bob Jonkman
: 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.
Andrea
: 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. :)