Expand DIV vertically to fill the remaining space in nonfixed height column - html

Question

I have the following DIVs structure:
<div id="d1">
<div id="d2">
</div>
<div id="d3">
<div id="d4"></div>
<div id="d5"></div>
</div>
</div>
DIV d2 is the left column (float: left), while d3 is on the right (float: right). d4 and d5 all go into right column d3, one below the other. The widths are all fixed.
DIVs d4 has fixed height of 300px.
The content of div d2 has dynamic height but it is at least 300px high.
My goal is to make DIV d5's height to fill the remaining space in the right column (d3) so that the total height of this column is equal to the dynamic height of the left column (d2).
I would like a pure CSS solution, no JS.
This is the CSS I am using:
#d1 {
width: 990px;
border: 1px solid black;
background-color: pink;
}
#d2 {
float: left;
width: 300px;
background-color: yellow;
}
#d3 {
float: right;
width: 690px;
}
#d4 {
background-color: blue;
width: 690px;
height: 300px;
}
#d5 {
background-color: brown;
width: 690px;
}

Answer 1

You can use display: tale; and table-cell; with a heightof 100% on d5.
#d1 {
width: 990px;
border: 1px solid black;
background-color: pink;
padding: 3px;
display: table;
height: 10000px;
}
#d2 {
display: table-cell;
width: 300px;
background-color: yellow;
}
#d3 {
display: table-cell;
width: 690px;
}
#d4 {
background-color: blue;
width: 690px;
height: 300px;
}
#d5 {
background-color: brown;
width: 690px;
height: 100%;
}
http://jsfiddle.net/nnjse/1/

Answer 2

Add to main block #d1 border-right 690px and using negative margin -690px put right column #d3 over it. Border will look like right column's background. If #d2 gets higher #d1's border will make illusion that right column fills whole parent height. The same principle with negative margins but in vertical direction can be used for #d4 and #d5.
#d1{
width:300px;
margin:0 auto;
border-right:690px solid #a52a2a;
background:#ffff00;
}
#d2{
width:300px;
float:left;
}
#d3{
width:690px;
float:right;
margin-right:-690px;
border-top:300px solid #EEE;
background:#a52a2a;
}
#d4{
height:300px;
margin-top:-300px;
background:#0000ff;
}
#d5{
height:100%;
}