CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

Making div heights equal without display table property

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/

Upvotes: 0

Views: 107

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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%   
    }

Upvotes: 2

Related Questions