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.
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 `
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
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 withoverflow: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.
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.