Set content container to 100% of body not parent

star_fuki

New Member
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 (\[code\]div.liquid-right\[/code\]) and site content is then meant to go in to the left column (\[code\]div.liquid-left\[/code\]).I need the content container to be the same size as the body (that is, \[code\]div.liquid-right\[/code\]) and not its parent which is the left container(\[code\]div.liquid-left\[/code\]).The layout can be represented by the following diagram:\[code\]_______________| ____ R || |L __|_____ || | |C | ||| | | | ||| | | | || |_|_|__|_____||\[/code\]HTML markup\[code\] <div class="liquid"> <div class="liquid-right"> <div class="nav-menu"> menu items </div> <div class="liquid-left"> <div class="liquid-content"> <div> main content </div> </div> </div> </div> </div>\[/code\]CSS style\[code\].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%;}\[/code\]Currently the \[code\].content\[/code\] 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.
 
Back
Top