Резиновая верстка DIV-ами

[graf]

Здравствуйте, задача чисто теоретическая, просто не дает мне покоя.

Существует блок известной ширины и высоты, допустим такой:

<div style="height: 500px; width: 200px; background-color: blue; border-right: 3px solid red"></div>

справа от него нужно поместить блок который бы занимал все оставшееся пространство справа, изменял ширину при изменении ширины окна, и имел position: relative т.к. в него нужно будет засунуть небольшой блок с position: absolute.

Для того чтобы было понятнее, псевдокод может выглядеть так:

<div style="height: 500px; width: 200px; float: left; background-color: blue; border-right: 3px solid red"></div>
<div style="height: 500px; width: 'оставшийся_размер_до_края_окна_в_процентах'; position:relative background-color: green; border: 2px solid black;">
  <div style="position absolute; width: 100px; height: 40px; left: 10px; top: 20px; background-color: red;"></div>
</div>

Подскажите пожалуйста, как выполнить такую верстку с резиновым правым блоком на css?

[sigma77]

http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva

Только ширина левой колонки у тебя будет не в процентах, а в пикселях.

Альтернативный вариант - задать правой колонке overflow: hidden.

[graf]

Ага, спасибо, помогло. Единственное что плохо, это то что при изменении бордера или размера левой колонки, значения margin-left правой тоже прийдется менять.