Three coulmns same height, problem in ie7

[Hrvoje85]

http://www.hrvojemesec.com/panaceo/v9/index.html

This is my website, and in all other browsers except ie7 it turns out just fine, but in ie7 the height of the div#sredina (content div) is equal to the .center div and the .left and .right divs content is cut off.
I tried all kinds of hacks for ie7 but nothing works. I just want the height of the whole div#sredina (content div) to stretch as in all other browsers until the end of the content in any inner .div. What do I have to do?


Structure of the page:

<div class="wrapper">

<div id="sredina">
<div class="holder">

<div class="left">lijevi stupac</div>
<div class="right">desni stupac</div>
<div class="center">srednji stupac</div>

</div>
</div>

</div>


css:

.wrapper {width: 100%; margin:auto;}
.left {width: 280px; float: left; background-color:#b9b9b9; padding-bottom:9000px; margin-bottom:-9000px; border-right:2px solid #ffffff; min-height:1000px; margin-right:25px;}
.right {width: 280px; float:right; background-color:#d9d9d9; padding-bottom:9000px; margin-bottom:-9000px; border-left:2px solid #ffffff; margin-left:25px;}
.center {background-color:#f4f4f4; padding-bottom:9000px; margin-bottom:-9000px;}
.centar {float:clear;}
* html div#sredina .center {display: inline-block;}
div.holder {overflow:hidden; width:100%;}

div#sredina- no style

What do I have to do, does anyone have a suggestion?

[Hrvoje85]

So far the best solution is to set different .centar div's height at every .html file, but is there a smarter solution?

[simcomedia]

This is the best solution i've found:

http://www.simcomedia.com/css-equal-column-height-solution

[Hrvoje85]

Thanx, mark this solved