html - How to change the height of a div dynamically based on another div using css?

Question

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 height of div1 is auto so it won't help.

Here is my fiddle http://jsfiddle.net/prashusuri/E4Zgj/1/

How to do this?

Answer 1

#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.