Expand height of child to parent of undeclared height

Question

I have 3 blocks of divs, side by side. The left one is an ad, the middle one is of unknown height, it could be 100px height or 1000px, and the right is also a relatively unknown height. Either of these 3 divs could be the tallest thing in the container.

I'd like the left div to extend to the bottom of the container div. Then I can center the ad within, but it's important I make 'left' extend to the bottom of its parent.

http://jsfiddle.net/wuo4jvwu/

.container{
    background:green;
    display: inline-block;
}
.left{
    float:left;
    margin-right:10px;
    width:100px;
    background:red;
}
.ad{
    height:200px;
    width:100px;
    background:pink;
}

.middle{
    float:left;
    margin-right:10px;
    width:200px;
    background:red;
}
.right{
    float:left;
    width:100px;
}

.right .news{
    background:red;
    width:inherit;
    height:200px;
}

.right .tweets{
    background:red;
    margin-top:10px;
    clear:both;
    width:inherit;
    height:100px;
}

.clear { clear: both; }

<div class="container">
    <div class="left">
        <div class="ad">AD</div>
    </div>
    <div class="middle">
        <ul>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
        </ul>
    </div>
    <div class="right">
        <div class="news">news</div>
        <div class="tweets">tweets</div>
    </div>
    <div class="clear"></div>
</div>

Answer 1

Dump the floats and change the display of the container to table... and the the displays of the child divs to table-cell. Then play with the alignment on each div as you see fit.

.container{
    background:green;
    display: table;
}

.left{
    margin-right:10px;
    width:100px;
    background:red;
    display:table-cell;
    vertical-align:middle;
 
}
.middle{
    margin-right:10px;
    width:200px;
    background:red;
    display:table-cell;
}
.right{
    width:100px;
    display:table-cell;
      vertical-align:top;
}

.right .news{

    background:red;
    width:inherit;
    height:200px;
}

.right .tweets{
    background:red;
    margin-top:10px;
    clear:both;
    width:inherit;
    height:100px;
}


.ad{
    height:200px;
    width:100px;
    background:pink;
}


.clear { clear: both; }

<div class="container">
    <div class="left">
        <div class="ad">AD</div>
    </div>
    <div class="middle">
        <ul>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
        </ul>
    </div>
    <div class="right">
        <div class="news">news</div>
        <div class="tweets">tweets</div>
    </div>
    
    
    <div class="clear"></div>
</div>

Answer 2

You can add overflow: hidden and position: relative to parent(.container) and add position: absolute to .left:

.container {
  background: green;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.left {
  height: 100%;
  position: absolute;
  left: 0;
}
.ad {
  height: 100%;
  width: 100px;
  background: pink;
}
.middle {
  float: left;
  margin-right: 10px;
  width: 200px;
  background: red;
  margin-left: 110px;
}
.right {
  float: left;
  width: 100px;
}
.right .news {
  background: red;
  width: inherit;
  height: 200px;
}
.right .tweets {
  background: red;
  margin-top: 10px;
  clear: both;
  width: inherit;
  height: 100px;
}
.clear {
  clear: both;
}

<div class="container">
  <div class="left">
    <div class="ad">AD</div>
  </div>
  <div class="middle">
    <ul>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
    </ul>
  </div>
  <div class="right">
    <div class="news">news</div>
    <div class="tweets">tweets</div>
  </div>
  <div class="clear"></div>
</div>