How to expand left div to the remaining height?

Basically i have:

<div class="wrap">
<div class="sum">
little text
</div>
<div class="content">
long<br/>
开发者_Python百科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>

If you see, the sum div doesn't expand to the remaining height to equal to the content div. All i want is both divs be in the same height without specifying it.

I totally need a Pure css, and not javascript or table.

Thanks

This might be a better option for you...

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

or check out faux columns:

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