Equal Height Columns With Borders

The trick is to create a box that both columns float inside (thus the containing box takes the height of the taller box). The border around the box becomes the border for each column. To separate the two columns and provide the right border for the left box and the left border for the right box and absolutely positioned element with a very large height is positioned in the middle of the box. The containing box then has its overflow property set to hidden to hide the extra length of the vertical separator element.



This is a demo of creating columns of equal height with background colors and borders. This technique has been tested in IE 5, 5.5, 7, 8, Firefox 3, Opera 9.

Limitations include the border and background color must be the same for both columns and when the viewport is narrowed to less than the width needed to display both columns side-by-side the floating columns do not wrap. A min-width rule or a fixed-width rule would work around this issue.

A star-HTML hack is used to handle hasLayout bugs in IE 5 and 5.5 (and 6, although untested).