The online playground of Andrea Schwandt-Arbogast:web design, university web development, animals, books, and other slices of life.

Flexible Equal-Height Boxes: CSS and Javascript Methods

The new design of this site relies heavily on boxes of equal height. I did a lot of thinking about how to accomplish this, and a lot of playing around with different methods during my design process, so I thought I’d share with you the ones I chose to use and why.

CSS Method

The most obvious use of equal-height boxes is on the front page, where I show excerpts from the most recent articles in each of the three main sections of the site, followed by links to some older articles and the section archives. It was important for the design that the “coffee”, “cocoa”, and “margarita” columns all be the same height, and that the title of each of the subsections align with each other across the three columns. I was able to accomplish this and more using my trusty friend, the em.

I like to specify font size and line height using ems. This allows users to increase their browser font size and still maintain the line height relationships that I have set up. I found that doing this also allowed me specify heights of boxes in terms of ems, and be confident that my text would be cut off neatly in between two lines. An example would probably help here:

The first question I had to tackle was “How do I get all three excerpts to be the same height, when I can’t predict the length of the title?”. The title may be anywhere between 1 and 4 lines long, depending on my mood at the time of writing. I knew from my CSS font specifications that the <h2> elements containing the titles were 1.2em in size, and had a line height of 1.2em, with a .5em bottom margin. I also knew that the <p> elements containing the body of the excerpt had a size of 1em and a line height of 1.5em. So I knew there was a way to specify the height of the excerpt such that the bottom of the box would always fall between two lines of excerpt text. I could then hide the rest of the excerpt with overflow:hidden and have equal height excerpts.

Well, I fired up the calculator widget and started doing, as Steve likes to put it, “The Math”. After about an hour of calculations, resulting in a spinning head and much frustration, I decided to determine this height by trial and error. Which worked like a charm, giving me a height of 12.3 em for the excerpts, which allows sufficient text to show no matter how long title, and always cuts off between two rows of text. So hey, presto, I had three equal height excerpt boxes.

Follow this same method, I was able to set equal heights on the boxes containing the “More drinks” titles, and have all three of the archives links align. And I also used this method on the “Best of” and “Elsewhere” sections, keeping them equal heights as well. I then realized that since I had all heights specified in ems, I could also get the tab on the right containing the navigation to be equal in height to the three other main columns on the page, an added bonus that I wasn’t anticipating.

The best thing, though, about this technique, is that the columns are flexible. If a user increases their font size, the columns still hold up, up to a certain point. There is some text overlap at large font sizes, which I still working on, but at most font sizes the layout should hold.

Javascript Method

Another place I rely on equal-height boxes is on the article pages. I want the left-hand navigation column to be equal to the height of the column containing the article text, so that the dotted border always extends to the bottom of the article. This time I can’t use ems, because there is really no way of predicting how long I’m going to ramble on in my articles.

The border was problematic no matter which column I placed it on, because the article may or may not be longer than the navigation. So there would be some instances where the border wouldn’t extend to the bottom of the page if I just chose to put the border on one of the two columns and do nothing else.

So I looked for another method. What I needed was to force the height of both columns to be the same height as the longer of the two columns. Luckily, there are some folks out there who have published Javascript methods to do just that. There are several scripts out there, as a quick Google search can show you. The one I ended up using is from paulbellows.com.

The reasons I chose this script were twofold. First, it uses modern DOM scripting methods, and second, it recalculates the column sizes when the browser window is resized. Since this site is liquid, the second was important to me, as resizing the window can have a huge impact on the length of the columns, and if the script didn’t account for that, there could be some messy looking results.

The one flaw of this method is that the column sizes aren’t recalculated when the text size is changed. So if a user increases the text size of an article, they are left with text overlapping the boundaries of the box until they resize or reload the page. I haven’t been able to find any way to overcome this, although I am continuing to look. If you have any pointers, let me know.

Conclusion

While not the most elegant solutions, there are ways to create equal height boxes in today’s browsers without using tables. I look forward to the days when we can rely on using “CSS table display properties” and/or CSS3 multi-column layouts to achieve this (aside: check this blog out in Firefox 1.5 alpha— CSS columns, cool!) , but until then, we’ll still have to keep coming up with creative solutions.

Commentary

1

Mike Purvis writes

Sep 22 at 07:07 PM #

Hi, just stumbled by from SVN.

As far as getting equal-height columns in CSS, it’s perfectly possible to do without Javascript, and definitely without Faux-Column images.

 

http://sandbox.mikepurvis.com/css/bordercolumn/three.php

 

That’s using the same basic principle as Piefecta, but it’s been dumbed down and simplified a lot.

2

Andrea writes

Sep 22 at 09:11 PM #

Mike: Welcome, and thanks!

I used a similar technique on HSU’s site to achieve the equal height borders.  The one I used there is a lot hackier, though, which is why I looked into alternatives here.

 

Yours looks a lot cleaner, though, and thinking about it, may be a better solution for these interior pages.

3

Paul B writes

Oct 17 at 06:44 PM #

I’ve been swamped on a couple of projects lately, but I’m doing a ton of playing with different ways to build nicely degrading DOM controls for common display problems.  I’m going to see if in my travels I can create a better way to handle the text-resizing. 

In my initial investigation it didn’t seem to be an event that could be tracked consistently across all browsers.  But there must be a way.  There’s always a way.  Even if it’s not a good way…

4

Andrea writes

Oct 18 at 08:53 PM #

Paul:  It would be great if you came up with something.  I looked around a little and didn’t find anything, either, but I still hold out hope.  let me know what you come up with!

5

mrmachine writes

Oct 21 at 05:28 AM #

Mike’s solution seems to depend on a single background colour or image for the two side columns, and ensuring that the middle column is the tallest. ideally, each column should be able to use a distinct background (and borders), and actually be 100% high, no matter which column is tallest.

6

Son Nguyen writes

Feb 8 at 10:26 AM #

After considering different solutions, I might go back to the good ol’ table as I don’t want to use some hack and forgo the original elegant of CSS.

7

Mike Purvis writes

Sep 1 at 02:32 AM #

mrmachine: My solution most certainly does not depend on a long center column—-it works with any length. And it’s easy to add an additional wrapper to get you distinct sidebar backgrounds.

Son: It’s not really a hack, it’s just putting negative margins to use.
——-

Commenting is not available in this weblog entry.

In: Coffee at my Desk

This is the section that contains all of my professional articles — serious, no-nonsense stuff that you may need caffeine to get through.

Cocoa on the Couch

SXSW 2009 wrap-up

I’ve been trying to figure out how to sum up SXSW 2009 since I got back, and I’m still not sure I can do it. It was a much …More »

Margarita on the Rocks

poodle, purse, & pumps

Right. I realize that I haven’t blogged in over a year. I am working on remedying that, and have a bunch of half-finished projects to prove it. More on that …More »