Question

In the following code, the left both divs have different heights (not fixed). Is there a way to make height of div with the less height equal to the height of div with high height without using the CSS table property or javascript?

PS. There is no reason not to use table property, I just want to know if theres any alternative.

<div class="wrap">
    <div class="left">less content</div>
    <div class="right">more content</div>
</div>

CSS:

.wrap{
    overflow: hidden;
    background: green;
    width: 100px;
    margin: 30px 100px;
}
.left{
    background: yellow;
    width: 50px;  
    float:left;
    overflow: hidden;
}
.right{
    background: brown;
    width: 50px;
    float:left;  
    overflow: hidden;    
}

JSFiddle:
http://jsfiddle.net/Vv2Ue/

Answer 1

I just tackled this issue today. Checkout the following resource: http://www.vanseodesign.com/css/equal-height-columns/

I like the last suggestion, which basically creates the illusion of equal heights.

Html

<div id="container-outer">
    <div id="container-inner">

        <div id="sidebar">
            <p>Sidebar</p>
        </div>

        <div id="content">
            <p>Main content</p>
        </div>

    </div>
</div>

CSS

#container-outer {
        float:left;
        overflow: hidden;
        background: #eee;
    }

    #container-inner {
        float:left;
        background: #555;
        position: relative;
        right:75%;
    }

    #sidebar {
        float: left;
        width: 25%;
        position: relative;
        left: 75%;
    }

    #content {
        float: left;
        width: 75%;
        position: relative;
        left: 75%   
    }