CSS column height example

A very frequently asked question is how to get a side-bar menu to extend to the same height as the content when using CSS for layout.

This page gives one answer. It uses simple DIVs, without any form of positioning – see the source for details. The key features are:

1. The DIV with the pale green background encloses the content;
2. The menu is floated to the left, within the margin of the content.

The page works fine in Firefox, Chrome, Internet Explorer 7/8 and in Opera 7+.

It even works fine in IE 6 as well, except for a small hiccup if one wishes to apply it to a page with very little content, so the content may be shorter than the menu. I have applied a 'min-height' property to the content DIV to cope with this, but IE 6 fails to recognise this property. If this situation arises, one is going to have to do something like applying a large bottom padding to the last paragraph. (As of 2010 IE 6 really should have been consigned to the scrapheap, but some large organisations are still using it.)