Search code examples
htmlcss-floatfluidliquid-layout

Align a DIV to the right of a fixed width left bar


With a fluid layout, trying to have a 200px left bar and the right div should expand width wise. When some wide content goes in (say a table with a few columns), if the browser isn't wide enough, the right div gets pushed down below the left bar.

How can I sort this?

#container{
    min-height:300px;
}
#leftBar{
    width:200px;
    float:left;
}
#content{
    float:left;
    padding:20px;
}

<div id="container"> 
 <div id="leftBar"> 
  Left bar here fixed width 200px
 </div> 
 <div id="content"> 
  Should expand to fit parent div, but any long content pushes this beneath the leftBar div
 </div> 
 <div class="clear"></div> 
</div>

Solution

  • The correct solution is here:

    In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?