Put Yer Foot Down: A Vacuum Tube Solution

One of the nicest things about using HTML tables for design was that they made it painfully easy to create a multi-columned layout with a header and footer. Building a multi-column design using pure CSS has been well–documented in many places, but I’ve found that many CSS designs lack one attractive feature of tables: the Minimum Height, Auto-Stretching Vertical Content Area.

In these designs, the content area stretches when there is too much stuff to fit on one screen. Even when there was little or nothing on the page, the content area still retained a minumum height, keep things from feeling all squashy on sparsely populated pages.

In a perfect world, the ideal solution is to always author enough content so that you never end up with a page so devoid of meaning. In the real world we need a solution, a vacuum tube solution, with a content area that will hold its space no matter how little it contains. Maintaining a minumum height was easy with tables, but can be a bit tricky with CSS.

First, let’s look at an example CSS layout. It looks pretty nice, but it feels smooshed when we remove all but a smidgen of content.

CSS conveniently provides us with the min-height property, which would be a complete solution if it weren’t for a particular browser that doesn’t play the game. For now, check it out:

div#content {

min-height: 400px;

}

No matter how much content is in the content area, it will be at least 400 pixels tall, flesh out your page and push your footer to the floor. If there is a ton of content, the area will stretch vertically to accomodate it. This rule works in fully-compliant browsers, but will be completely ignored by IE. Internet Explorer does not support the min-height property, and actually treats the height property like min-height. Consider the following:

div#content {

height: 400px;

}

This will be read by IE, but it will be interpreted as though it is the min-height property. In IE, the content area will be at least 400 pixels tall no matter what, and will stretch if there is more content than the space can handle. This is a pretty major wrankle with IE, as the CSS spec says that any block-level element with a height explicitly defined should never be allowed to stretch (or squash) beyond (or below) its defined height.

Fret not. We can do it anyway, and it only requires one minor trick:

div#content {

height: 400px; /* defined here for IE */

min-height: 400px;

}

html>body div#content {

height: auto; /* for compliant browsers, ignored by IE */

}

IE will read the first height (treating it like min-height), but it will ignore the min-height. Since IE/Win doesn’t support child selectors, its height will not be reset by the { height: auto; } rule. Browsers that support child selectors will read the first height and the min-height, but will have their explicit height reset by { height: auto; }. No longer having a height defined, they will correctly use the min-height property, which is exactly what we want them to do.

Yes, it is that simple. Check it out with tons of content and mere scraps of content. This technique has been tested and proven in the following browers:

• IE 6.0/Win
• Opera 7.54/Win & Mac
• Mozilla 1.7.2/Win & Mac
• Firefox 0.9.3/Win & Mac

It doesn’t work in Safari 1.2.3, which correctly handles the height property but doesn’t support the min-height property (yet). It also doesn’t work in IE 5.2/Mac for the same reasons. Fortunately, this technique degrades gracefully in both these browsers, as they both correctly parse the html>body child selector and have their explicit heights overwritten by the { height: auto; } rule. Thus, we avoid any carnage resulting from overflow problems, and you simply don’t get the neatness of minimum height on pages with thin soup. Perfect.

P.S. There has been talk of using the CSS table-cell property to spoof minimum heights, but using it results in some pretty gnarly display issues in IE 5.x/Mac. There are CSS hacks one can use to show/hide this information from IE/Mac, but the aesthetics of using height and min-height outweigh my desire to exploit the table-cell property.

Anyways. Go warm up your vintage amps and start rockin’!