Построение динамической таблицы / сетки сетки, которая работает на разных экранах

Question

Я собираюсь построить сетку так:

                       <- 100px ->
       +---------------+---------+ -
       | contentbox    | Right   | |
     - +---------------+     box | | 80 %
25px | | bottombox     |         | |
     - +---------------+---------+ -
       <--------- 80 % ---------->

Моя текущая проблема заключается в создании этого гибкого. Размер самого окна составляет 80% от ширины окна браузера пользователя. Contentbox должен иметь возможность настраивать себя соответствующим образом, все остальные блоки имеют фиксированный размер.

Как мне этого добиться?

Я пытался сделать это с таблицами:

<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>content content content content content content content content content content content content content content content content content content</td>
    <td width="200" rowspan="2">rightbox<br />
    rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox</td>
  </tr>
  <tr>
    <td height="25">bottombox</td>
  </tr>
</table>

Но, похоже, что независимо от того, что я делаю, нижняя коробка всегда будет получать половину высоты правой коробки.

Но я бы предпочел сделать это с помощью divs.

Answer 1

Вот что-то вроде того, что вам нужно: http://jsfiddle.net/kizu/zLGez/

Если вам нужны одинаковые столбцы или есть другие требования - обновите свой вопрос, и я обновлю свой ответ:)

Answer 2

Дайте контентным боксам и нижним боксам правое поле в 100 пикселей.Затем используйте float в правом поле, чтобы заполнить пространство, где находится это поле.он будет обрабатывать макет в другом контейнере, который позаботится о ширине 80% (достаточно легко) и высоте 80% (немного сложнее).