FEHC (Fake Equal Height Columns)

Compatible with Chrome, Firefox 3+, Internet Explorer* 6+, Opera 9.64+; Safari 4+.
* Internet Explorer 6 and 7 require a little JavaScript help.

What FEHC Does

Provides a method to fake equal height columns using HTML and CSS.

Demo

HTML

<div class="cols cols-fehc">
    <div class="col col-1">
        <div class="col-inner-fehc"><div></div></div>
        <div class="col-inner">
            <p>Column 1<br />
                column text
                Left column text Left column text Left column text
                Left column text Left column text Left column text
                Left column text Left column text Left column text
                Left column text Left column text Left column text
                Left column text Left column text Left column text
            </p>
        </div>
    </div>
    <div class="col col-2">
        <div class="col-inner-fehc"><div></div></div>
        <div class="col-inner">
            <p>Column 2<br />
                column text
            </p>
        </div>
    </div>
    <div class="col col-3">
        <div class="col-inner-fehc"><div></div></div>
        <div class="col-inner">
            <p>Column 3<br />
                column text<br />
                column text
            </p>
        </div>
    </div>
</div>

CSS

/*/ FEHC CSS /*/ 
.cols-fehc {position:relative;}
.cols-fehc .col-inner-fehc {position:absolute;top:0;height:100%;z-index:-1;width:inherit;}
.cols-fehc .col-inner-fehc div {height:100%;padding-top:0!important;padding-bottom:0!important;}

/*/ Column CSS /*/
.cols {display:inline-block;}
.cols {display:block;}
.cols:after {content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.col {float:left;display:inline;margin-right:-1px;}
.col-1 {width:50%;}
.col-2 {width:25%;}
.col-3 {width:25%;}
.col-inner,
.col-inner-fehc div {margin-right:12px;padding:12px;}
.col-3 .col-inner,
.col-3 .col-inner-fehc div {margin-right:0;}

/*/ FEHC CSS FUN BUN /*/
.cols-fehc .col-inner-fehc div {
    background: #f6f8f9; /* old browsers */
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* webkit */
    -moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;border:2px solid #D8DFE4;
    /* Thanks to css3generator.com */
}

IE 7 JavaScript to fix width inherit

jQuery version, would be nice to make this easier to implement.
<!--[if IE 7]>
<script type="text/javascript">
//<![CDATA[
    $(function()
    {
        $('div.col-inner-fehc').each(function()
        {
            var $fehc = $(this);
            var $col = $fehc.parent();
            $col[0].attachEvent('onpropertychange', function(e)
            {
                if (e.propertyName == 'fehc_complete' || e.propertyName == 'style.width' || e.propertyName == 'className' || e.propertyName == 'id')
                {
                    $fehc.css({width:$col[0].currentStyle.width});
                }
            });
            $col[0].fehc_complete = true;
        });
    });
//]]>
</script>
<![endif]-->

IE 6 JavaScript to fix height 100%

jQuery version, would be nice to make this easier to implement.
<!--[if IE 6]>
<script type="text/javascript">
//<![CDATA[
    $(function()
    {
        $('div.col-inner-fehc').bind('resize', function()
        {
            var offset_parent = $(this).offsetParent();
            offset_parent.find('div.col-inner-fehc div').css({height:offset_parent.height() + 'px', paddingTop:0, paddingBottom:0});
        })
        .trigger('resize');
    });
//]]>
</script>
<![endif]-->