Как сделать 2 DIV: фиксированный + резиновый вместе?

Question

[Lici]

Вот страница: tkstour.com/about_tkstour например
Есть 2 блока, левый <div class="sitebar"> и правый <div class="rt_main">.

Левый должен быть фиксированной ширины width: 240px;
Правый должен заполнять всю центральную часть сайта (div class="block"), которая, в свою очередь, меняется в зависимости от ширины окна браузера.

Я уже игрался с overflow: hidden, с разными float, с min-width и max-width, с display, со всем что знаю или нагуглил. Даже display table пробовал.

Почти то, что надо получается, если сделать sitebar, например, width=30%, а rt_main width=70%. И тогда они оба резиновые и остаются на месте.

Но мне нужно сайдбар - фиксированный, а основной блок - резиновый. А сейчас просто при уменьшении окна так, что этому блоку остается меньше места, чем в max-width - он спрыгивает вниз, под блок сайдбара.

Верстал не с нуля и уже об этом пожалел, вот тянутся подобные странности через весь процесс.

Answer 1

[Hakyna]

олдскул)
codepen.io/anon/pen/Ggkoh

Answer 2

[Lisonok]

Можно задать их общему родительскому элементу
width: 100%;
display: table;
А самим блокам
display: table-cell;
Левому блоку задаете ширину и правый буде автоматически занимать все свободное место.
P.S. Если текст должен быть прижат к верху, то допишите блокам vertical-align: top;

Второй способ
У левого блока задаете width:240px;
А у правого width:calc(100% - 240px)
И либо обоим задать float:left, либо display: inline-block
НО!!! IE8 и ниже не поддерживает calc()

Comments

[Lici]

Это не вышло:

display: table;
А самим блокам
display: table-cell;

Сделал уже через calc.

[Lisonok]

codepen.io/anon/pen/Fpnqt