Q:

How do I set a floating element automatically fill the remaining height of its parent element (height not fixed and displayed as a table)?

I have the following code:

.parent {width: 960px; display: table}

.1 {
  width: 45%;
  margin: 20px;
  float: left;
  height: 1000px; /* it can be smaller or bigger than this value to fit its content */
}

.2 {
  width: 45%;
  margin: 20px;
  float: right;
  height: 200px;
}

.3 {
  width: 45%;
  margin: 20px;
  float: right;
}
<div class="parent">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
</div>

How do I write the CSS for class "3" so that its height automatically fill the remaining height of the table (in the case above, 720px, as the parent element will have, I assume, height of 1000px too)? Note that the height of class "1" can change according to its contents.
Off-topic: Is there a better way to make it look like the picture below other than the codes I'm using now (only using CSS and HTML)?
The Image of the Table 

A:

Try this one. the third element(green) will adjust based on the height of .one. But it is implemented based on the assumption that .two is having fixed dimensions.

.parent {
    width: 960px;
    border: solid 2px #999;
    float: left;
    position: relative;
}
.one {
    width: 50%;
    float: left;
    height: 1000px;
    background: #ccc;
}
.two {
    width: 50%;
    float: right;
    height: 200px;
    background: #aaa;
}
.three {
    position: absolute;
    top: 200px;
    left: 50%;
    right: 0;
    bottom: 0;
    background: green;
}
<div class='parent'>
    <div class='one'>one</div>
    <div class='two'>two</div>
    <div class='three'>three</div>
</div>

