Set equal height on 3 divs

Question

i created 3 divs , i have to set equal height of all i tried with height:100% but its not working.all of these div have variation on them content but i need equal height of all.please help me!

<html>

<style type="text/css">

.b1{height:190px;width:150px;background:#963;float:left}
.b2{height:150px;width:150px;background:#955;float:left}
.b3{height:180px;width:150px;background:#966;float:left}

</style>
</head>

<body>

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>

</body>
</html>

[working like a charm](http://jsfiddle.net/Cb4nU/) what's the problem? — Peter, Jan 18 '13 at 11:47
I need to support on web kit also in IE and all if possible. — Yajuvendra, Jan 18 '13 at 11:48
@morpheus yes it is 150px but i tried with 100% but its not working. — Yajuvendra, Jan 18 '13 at 11:50
@Yajuvendra so this should be your question "how to set 100% height" - solution http://jsfiddle.net/Cb4nU/3/ — Peter, Jan 18 '13 at 11:53
@PeterSzymkowski yes its working here but not in my project. — Yajuvendra, Jan 18 '13 at 12:46
@PeterSzymkowski [link](http://jsfiddle.net/yaju99/9Z79R/) here is the my problem. — Yajuvendra, Jan 18 '13 at 14:09
@Yajuvendra http://stackoverflow.com/questions/6158975/css-100-height-layout — Peter, Jan 18 '13 at 16:05
@PeterSzymkowski it is in table and very complicated do you have any other example? — Yajuvendra, Jan 19 '13 at 11:49

score 3 · Accepted Answer · answered Jan 18 '13 at 11:54

3

You need to set all parent elements height to 100%, in your case it will be:

body,html { height: 100%; }

Demo: http://jsfiddle.net/Cb4nU/3/

answered Jan 18 '13 at 11:54

Peter

16,453
8
51
77

score 2 · Answer 2 · answered Jan 18 '13 at 12:08

put this code in your css. i think this will help you..

 .b2{
    margin: 1px;
    background-color: ; 
    height: 100px;
    width:100px; 
    border: 1px solid ;
}
 .b2 {
    margin: 1px;
    background-color: ; 
    height: 100px;
    width:100px; 
    border: 1px solid ;
    }
 .b3 {
    margin: 1px;
    background-color: ; 
    height: 100px;
    width:100px; 
    border: 1px solid ;
}

cheers...!

score 0 · Answer 3 · answered Jan 18 '13 at 11:57

Wraping all 3 in a div with the height you want them to stretch to also works http://jsfiddle.net/Cb4nU/2/

<div class="a">
<div class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa, accumsan ut volutpat id, gravida porta turpis. Duis tincidunt feugiat est nec rhoncus.    </div>
<div class="b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa,</div>
<div class="b3">Lorem ipsum dolor sit amet</div>
</div>


.a{height:300px;}
.b1{height:100%;width:150px;background:#963;float:left}
.b2{height:100%;width:150px;background:#955;float:left}
.b3{height:100%;width:150px;background:#966;float:left}

score 0 · Answer 4 · answered Jan 18 '13 at 13:04

Hi below code snippet will do the needful,

CSS:

.parent { display:table; }
.b1{ border:1px solid red; display:table-cell; width:150px;background:#963;}
.b2{ border:1px solid green; display:table-cell; height:150px;width:150px;background:#955;}
.b3{ border:1px solid blue; display:table-cell; width:150px;background:#966;}

HTML

<div class="parent">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>

Changes :

Added parent container div
Removed height & float:left property from all div's in css
Added display property for all div's in css

Set equal height on 3 divs

4 Answers4