Объясните подробнее какого поведения хотите добиться (опишите поведение каждого из блоков).
Например, пока не понятно представленный на рисунке вид должен оставаться таким в рамках экрана или может прокручиваться, меню имеет постоянную высоту или зависит от содержимого, то же самое про баннер и т.д., также непонятно как это всё должно вести себя при масштабировании.
Deff, таблицу тоже проблематично удержать в рамках экрана при масштабировании (ну или я может быть чего-то не догоняю).
Вот пример
<!doctype html>
<style>
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
table {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
td {
border: 1px solid gray;
}
table div {
width: 100%;
height: 100%;
overflow: auto;
}
</style>
<table>
<tr>
<td colspan="2" height="5%">mainMenu</td>
</tr>
<tr >
<td width="30%" height="90%">
menu
</td>
<td width="70%">
<div>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
</div>
</td>
</tr>
<tr>
<td colspan="2">bottom</td>
</tr>
</table>