Prashanth Suriyanarayanan Prashanth Suriyanarayanan - 19 days ago 6
CSS Question

how to change the height of a div dynamically based on another div using css?

here is my code

HTML:

<div class="div1">
<div class="div2">
Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends
</div>
<div class="div3">
Div3
</div>
</div>


CSS:

.div1 {
width: 300px;
height: auto;
background-color: grey;
border: 1px solid;
overflow: auto;
}

.div2 {
width: 150px;
height: auto;
background-color: #F4A460;
float: left;
}

.div3 {
width: 150px;
height: auto;
background-color: #FFFFE0;
float: right;
}


i want to increase the height of div3 dynamically.

for example if the height of div1 is 500px then the height of div3 should be 500px. i know i can use inherit, but the thing is height of div1 is auto so it wont help. here is my fiddle http://jsfiddle.net/prashusuri/E4Zgj/1/ how to do this?

thanks

Answer
#container-of-boxes {
    display: table;
    width: 1158px;
}
#box-1 {
    width: 578px;
}
#box-2 {
    width: 386px;
}
#box-3 {
    width: 194px;
}
#box-1, #box-2, #box-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}
  • The container must have display:table
  • The boxes inside container must be: display:table-cell
  • Don't put floats.
Comments