кроссбраузерная верстка с "зажатой" row

[Rootpassword]

Задача. Три строки, верхняя и нижняя имеют фиксированный размер, как и таблица, центральная (456) должна быть ими зажата.
Не работает в IE(растягивается).

<br><br>
<div style=' height:300px; width:300px; position:relative; border:1 px solid; display:table;'>

<div style='display:table-row;'>
<div style='width:100%; height:50px; border:1px solid; display:table-cell;'>123</div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:100%; border:1px solid; display:table-cell;'>456</div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:40px; border:1px solid; display:table-cell;'>789</div>
</div>
</div>
<br><br>

Так же, в центральную часть пытаемся вставить div с размером, который должен совпасть с размеров вычисленной ячейки. Не работает в ИЕ и в Опере(растягивается).

<br><br>
<div style=' height:300px; width:300px; position:relative; border:1 px solid; display:table;'>

<div style='display:table-row;'>
<div style='width:100%; height:50px; border:1px solid; display:table-cell;'>123</div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:100%; border:1px solid; display:table-cell;'><div style='width:100%; height:100%; display:block; border:1px solid;'>inside</div></div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:40px; border:1px solid; display:table-cell;'>789</div>
</div>
</div>
<br><br>

Убирая размеры у центральной части, растягивание исчезает, но теряем доступ к размерам в div=inside для части браузеров()

<br><br>
<div style=' height:300px; width:300px; position:relative; border:1 px solid; display:table;'>

<div style='display:table-row;'>
<div style='width:100%; height:50px; border:1px solid; display:table-cell;'>123</div>
</div>

<div style='display:table-row;'>
<div style='border:1px solid; display:table-cell;'><div style='width:100%; height:100%; display:block; border:1px solid;'>inside</div></div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:40px; border:1px solid; display:table-cell;'>789</div>
</div>
</div>
<br><br>

Вот как добиться, что бы было и то и то? Пробовал таблицами(same shit), через margin и padding, абсолютным позиционированием, просто блоками без display.

[Pavel M.]

такой вариант не подойдет

<style type='text/css'>
.wrap {
    height:300px; 
    width:300px; 
    position:relative; 
    border: 1px solid;
}
.top {
    height: 50px;
    background: #eee;
        
}
.center {
    position:absolute;
    width: 100%;
    left: 0; 
    top: 50px; 
    bottom: 40px;
    background: #00f;
}
.bottom {
    position: absolute;
    width: 100%;
    left: 0; 
    bottom: 0;
    height: 40px;
    background: #f00;
}
</style>
  
<div class=wrap>
	<div class=top>123</div> 
	<div class=center>456</div>
	<div class=bottom>789</div>
</div>

[ksa]

Rootpassword, в твоих примерах нет ни строк, ни таблиц, ни ячеек...

Не работает в IE

Потому как

display:table-cell;

Не все поддерживают...
http://htmlbook.ru/css/display

Как тут не вспомнить классику:
- Есть король - ходи с короля! (с)

[Rootpassword]

Pavel M., благодарю. Код очевидный и работает, хотя я такое проверял и не вышло - наверное, в 4 утра мысли не собираются.
ksa, так не работает в ИЕ8(который уже поддерживает) и в Опере. Работает, если доктайп убрать и Опера - ИЕ сваливаются в режим старой совместимости, что уже признак того, что так не делать, ибо чревато.