FEHC (Fake Equal Height Columns)

Works with Chrome, Firefox 3+, Internet Explorer 7+, Opera 9.64+.

What FEHC Does

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

FEHC on a Regular Column CSS Method

Column 1
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 Left column.

Column 2
column text

Column 3
column text

HTML 

<div class="cols fehc-cols">
    <div class="col col-1"><div class="col-inner">
        <p><a href="#">Col 1</a> 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 Left column <a href="./" id="here">top</a>
        </p>
    </div></div>
    <div class="col col-2"><div class="col-inner">
        <p><a href="#">Col 2</a> column text</p>
    </div></div>
    <div class="col col-3"><div class="col-inner">
        <p><a href="#">Col 3</a> column text</p>
    </div></div>
    <div class="clear"></div>
    <div class="col col-1"><div class="col-1 fehc-col"><div class="col-inner"></div></div></div>
    <div class="col col-2"><div class="col-2 fehc-col"><div class="col-inner"></div></div></div>
    <div class="col col-3"><div class="col-3 fehc-col"><div class="col-inner"></div></div></div>
</div>

CSS 

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

/* Regular Columns CSS */ 
.cols {display:inline-block;} 
.cols {display:block;margin-right:-12px;} 
.col-1, 
.col-2, 
.col-3 {float:left;display:inline;margin-right:-1px;} 
.col-1 {width:50%;} 
.col-2, 
.col-3 {width:25%;} 
.col-inner {margin-right:12px;padding:12px;}

/* FEHC CSS FUN BIT */
.fehc-col .col-inner {
    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;
}

FEHC on an Any Column Order CSS Method

Column 1
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 Left column top

Column 2
column text

Column 3
column text

HTML 

<div class="cols fehc-cols">
    <div class="col col-1"><div class="col-inner">
        <p><a href="#">Col 1</a> 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 Left column <a href="./" id="here">top</a>
        </p>
    </div></div>
    <div class="col col-2"><div class="col-inner">
        <p><a href="#">Col 2</a> column text</p>
    </div></div>
    <div class="col col-3"><div class="col-inner">
        <p><a href="#">Col 3</a> column text</p>
    </div></div>
    <div class="clear"></div>
    <div class="col col-1 fehc-col"><div class="col-inner"></div></div>
    <div class="col col-2 fehc-col"><div class="col-inner"></div></div>
    <div class="col col-3 fehc-col"><div class="col-inner"></div></div>
</div>

CSS

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

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

/* FEHC CSS FUN BIT */ 
.fehc-col .col-inner { 
    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; 
}