Mirror column

by 3axap

HTML

<div class="side-left block" id="sidebar">контент
    <br>левой
    <br>колонки
    <br>:)</div>
<div class="side-right block" id="midCol">контент
    <br>правой
    <br>колонкит
    <br>правой
    <br>правой
    <br>правой
    <br>правой
    <br>правой
    <br>правой
    <br>правой</div>
<div class="block autoadjust">основной конент</div>

CSS

.block {
    vertical-align: top;
    border: 1px solid #aaa;
    padding: 2px
}
.side-left {
    display: inline-block;
    width: 20%;
}
.autoadjust {
    display: inline-block;
    width: 50%;
}
.side-right {
    display: inline-block;
    width: 20%;
}

JavaScript

$(document).ready(function () {

    var centerblockHeight = $('.autoadjust').height();
    var sideLeftHeight = $('#sidebar').height();
    var sideRightHeight = $('#midCol').height();

    if (centerblockHeight < sideLeftHeight || centerblockHeight < sideRightHeight) {
        $('.autoadjust').height(centerblockHeight + ((sideLeftHeight > sideRightHeight) ? sideLeftHeight : sideRightHeight));
    }

});