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

Question

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>

possible duplicate of [In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?](http://stackoverflow.com/questions/468038/in-css-how-do-i-get-a-left-side-fixed-width-column-with-a-right-side-table-that) — John Conde, Jun 17 '12 at 23:32
possible duplicate of [How to get Floating DIVs inside fixed-width DIV to continue horizontally?](http://stackoverflow.com/questions/1015809/how-to-get-floating-divs-inside-fixed-width-div-to-continue-horizontally) — rds, Dec 05 '13 at 16:42

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

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?

edited May 23 '17 at 12:06

Community

1
1

answered Jun 28 '10 at 08:51

Igor K

991
2
10
19

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

1 Answers1