Question

I have this div structure

<div class="panel">
    <div class="north"></div>
    <div class="center"></div>
</div>

The outer div is jQuery resizable
I tried to position the divs with percentage,

.north{height:30%}
.center{height:70%}

Works perfect, I got this

Now I am stuck on how to get this:

Any help?
Don’t forget that the outer div is resizable please..

Here is my starting point.

Edit
I tried also

.panel{display:table;}
.north,.center{display:table-row;}

But this doesn’t work on IE<8

Answer 1

Another solution with floats: http://jsfiddle.net/KMWw4/2/

.panel {
    width:  300px;
    height: 500px; /* explicit height */
    float: left;
}
.north {
    float: left; display: inline; /*iefix*/
    width:  100%;
}
.center {
    height: 100%;
}

.panel-percent .north {
    height: 30%; /* you can use percentages */
}
.panel-fixed .north {
    height: 100px; /* ... or pixel height */
}

​