Set content container to 100% of body not parent

Question

I am trying to create a 2 column liquid layout with a menu on the left and site content on the right.

The menu is meant to go into the right column (div.liquid-right) and site content is then meant to go in to the left column (div.liquid-left).

I need the content container to be the same size as the body (that is, div.liquid-right) and not its parent which is the left container(div.liquid-left).

The layout can be represented by the following diagram:

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

HTML markup

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

CSS style

.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%;
}

Currently the .content container is only the size of the left container (which is expected) but I have no idea how to expand it to the size of the body container.

UPDATE

http://jsfiddle.net/Ex4tK/

Answer 1

You have two content blocks inside of left. If you want them to expand, and keep left static, move those children out.

<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/