Установите контейнер содержимого на 100% тела, не являющегося родителем

Question

Я пытаюсь создать раскладку жидкости в 2 колонках с меню слева и содержимым сайта справа.

Меню предназначено для перехода в правую колонку (div.liquid-right), а затем содержимое сайта должно войти в левый столбец (div.liquid-left).

Мне нужен контейнер содержимого того же размера, что и тело (то есть div.liquid-right), а не его родительский элемент, который является левым контейнером (div.liquid-left).

Схема может быть представлена ​​следующей схемой:

_______________ 
| ____  R | 
| |L __|_____ | 
| | |C |  || 
| | | |  || 
| | | |  ||  
|_|_|__|_____|| 

HTML разметка

<div class="liquid"> 
    <div class="liquid-right"> 
     <div class="liquid-left"> 
      <div class="content"> 
       <div>main content</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS стиль

.liquid{ 
    width:100%; height:100%; float:left; 
} 

.liquid .liquid-right{ 
    width:100%; float:left; background-color:#FFF; margin-top:45px; 
} 

.liquid .liquid-left{ 
    width:182px; float:left; min-height:200px; 
    background-color:#FF7575; position:relative; 
} 

.liquid .content{ 
    background-color:#00F; float:left; height:100px; width:100%; 
} 

В настоящее время .content - это только размер левого контейнера (который ожидается), но я не знаю, как расширить его до размера контейнера для тела.

UPDATE

http://jsfiddle.net/Ex4tK/

Answer 1

У вас есть два блока контента внутри из left. Если вы хотите, чтобы они расширялись, и сохраняйте статичность left, переместите эти дети.

<div class="liquid-right"> 
    <div class="liquid-left">Left</div> 
    <div class="liquid-content">Liquid Content 
     <div> 
     main content 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/MhCke/