Auto Equal Height Columns

The idea come from a article at Blueidea, I just practiced the method and note the expriences here. The code below can work fine at IE 5+ and FF 1.5

1. Need a container which have the property "overflow: hidden", it is necessary.

2. The 2 columns in the container which wound be auto same height should set the property below:

padding-bottom: 32767px;
margin-bottom: -32767px;

The principle is simple that, padding-bottom property just pull the columns to 32767px height, and margin-bottom property draw the column start point back to zero , but the columns now have 32767 px height. And the container hide the overflow part, seems like they are equal.

The original post also have the modified coed which suit for some other browsers, such as Opera and Safari. See original ver. for more detail if these browsers was mentioned.

see the chinese ver. http://www.blueidea.com/tech/web/2006/3210.asp
also the original ver.(more detailed than the translated ver.) http://www.positioniseverything.net/articles/onetruelayout/equalheight