在未知高度的容器中将高度延伸至底部并垂直对齐

Question

我有3块div，并排。左边是一个广告，中间的一个是未知的高度，它可以是100px高度或1000px，右边也是一个相对未知的高度。这3个div中的任何一个都可能是容器中最高的东西。

首先，仅仅为了我自己的理解，我希望左边的div扩展到容器div的底部。 然后我希望'left'里面的'ad'在'left'的中间垂直对齐。如果达到第一个目标，我很确定如何做到这一点。

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>