Equal height columns. The easiest way to implement

I think any web-developer have heard about equal height columns. This tric makes pages more attarctive and enhance users content perception.

There are a lot of methods equal height columns implementation in Internet, but all of them has disadvantages. Previously, I have always used jQuery script. This is cross-browser solution , but the some users who turn off JavaScript in their browser will see your page without equal height columns and it's rather ugly. Perhaps this is the main disasdvantage of this method.

But recently, I stumbled upon the easiest way to implement the equal height columns, for which we only need a couple of CSS lines. Let's take a look:

<section>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</section>

section {
  overflow: hidden;
}

.first, .second, .third{
  padding-bottom:10000px;
  margin-bottom:-10000px;
}

That's all. So quick and simple way, we have implemented equal height columns. There is no support of this method in IE7, it's the main drawback, but fortunately the percentage of IE7 gradually decreases.