In two-column layout, make one column have fixed width and the other take remaining space

Question

Is there a way I can set the right hand panel to be say 200px and for the left panel to take up the rest of the space?

At the moment the right panel appears under the left panel.

Also, if I change the parent width, the left and right panels should appear within the parent and be sized accordingly.

#left {
  background-color: #ff0000;
}
#right {
  float: right;
  width: 180px;
  margin-left: 190px;
  background-color: #00FF00;
}

<div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>

http://stackoverflow.com/questions/1260122/expand-a-div-to-take-the-remaining-width — brs, May 02 '16 at 04:43

score 2 · Accepted Answer · edited May 23 '17 at 11:52

You can use flexbox:

#container {
    display: flex;               /* establish flex container */
}

#left {
    flex: 1;                     /* consume all available space */
    background-color: #ff0000;
}

#right {
    flex: 0 0 180px;             /* don't grow, don't shrink, fixed at 180px width */
    background-color: #00FF00;
}

<div id="container">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

jsFiddle

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

timolawl · Answer 2 · 2016-05-02T05:00:19.913

Is there a way I can set the right hand panel to be say 200px and for the left panel to take up the rest of the space?

Yes.

There's a variety of ways you can implement it. I have listed four options below. The first three will require the use of width: calc(100% - 200px) for the left panel. The last option using flexbox does not require it.

Using position: absolute:

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
}

#left {
  background-color: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 200px);
}

#right {
  width: 200px;
  background-color: #00FF00;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: calc(100% - 200px);
}

<div class='container'>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Using display: inline-block:

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;

}

#left {
  background-color: #ff0000;
  display: inline-block;
  width: calc(100% - 200px);
}

#right {
  width: 200px;
  background-color: #00FF00;
  display: inline-block;
}

<div class='container'>
  <div id="left">
    left
  </div><!--
--><div id="right">
    right
  </div>
</div>

Using float:

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;

}

#left {
  background-color: #ff0000;
  float: left;
  width: calc(100% - 200px);
}

#right {
  width: 200px;
  background-color: #00FF00;
  float: right;
}

<div class='container'>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Using display: flex:

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  display: flex;
}

#left {
  background-color: #ff0000;
  flex-grow: 1;
}

#right {
  width: 200px;
  background-color: #00FF00;
}

<div class='container'>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

score 0 · Answer 3 · answered May 02 '16 at 04:43

Swap DIVs around to change processing order:

 <div>
   <div id="right">
    right
</div>
<div id="left">
    left
</div>

 </div>

  <style>
  #left {
     background-color:#ff0000;
 }
 #right {
    float: right;
    width:180px;
    margin-left: 190px;
   background-color:#00FF00;
}
  /style>

score 0 · Answer 4 · answered May 02 '16 at 04:47

That kind of layouts can be easily addressed by using Flexbox, other option is to use calc, which browser support isn't too wide, but could help... you'll need to add:

#left {float: left; width: calc(100% - 200px);}

That's assuming your other element will be 200px per your question (but not your code), please remove the margin-left from the element #right to make this work.

Hope this helps.

If you want to check browser support for calc, take a look to http://caniuse.com/#search=calc

In two-column layout, make one column have fixed width and the other take remaining space

4 Answers4

jsFiddle