Как расширить левый div до оставшейся высоты?

Question

По сути, у меня есть:

<div class="wrap">
<div class="sum">
little text
</div>
<div class="content">
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
text
</div>
</div>

<style>
.wrap{
height:100%;
overflow:hidden;
background:green;
}
.sum{
float:left;
height:100%;
background:yellow;
}
.content{
float:left;
height:100%;
background:red;
}
</style>

Если вы видите, сумма div не увеличивается до оставшейся высоты, равной содержимому div.Все, что я хочу, это чтобы оба div'а находились на одной высоте, не указывая его.

Мне полностью нужен Pure CSS, а не javascript или таблица.

Answer 1

Это может быть лучшим вариантом для вас ...

http://bonrouge.com/2c-hf-fixed.php

или проверьте искусственные столбцы:

http://www.alistapart.com/articles/fauxcolumns/