Prashanth Suriyanarayanan Prashanth Suriyanarayanan - 1 year ago 128
CSS Question

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

here is my code


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


.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 how to do this?


Answer Source
#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.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download