Left Column

CSS

HTML

Right Column

It seems to be a very tricky problem to make two columns with equal height in HTML using CSS. There are many articles on how to do it. Maybe the most reliable way is to use javascript to force it at browser side since all CSS solutions look like dirty hack. I happen to find a possible solution using CSS.

The problem is like this. It is very common to create a two-column layout in CSS. Most books only cover how to make it using float and margin. It is enough if the columns have no background color or border. However, if you need to put a background color or border for the shorter column, you may find that its height is not as the same as the longer one.