ErnieBob ErnieBob - 1 year ago 47
HTML Question

How to make the width of a div in the middle responsive

Hi I'd like to know how to implement in CSS a way to make the width of a div in the middle of two other divs auto adjustable.

.container {
width: 100%;
.middle {
float: left; // or display:inline i don't know... you tell me
.left {
width: 50px;
.right {
width: 60px;
.middle {
width: "...fill the container...";

<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

So as you can see, the container is responsive, and the divs on the left and on the right are fixed. I need to have the div in the middle responsive so that it fills the container.

You can think of it like two sidebars fixed and the main content responsive in the middle of them

Answer Source

Using flex you could add display: flex; to the .container and flex:1; to the .middle.

Since the above will not work for IE<10...
You could simply use display table and cell:

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

  table-layout: fixed;

/* your styles */
.left  {width:50px; background: #0bf;}
.middle{width:auto; background: #fb0;}
.right {width:60px; background: #bf0;}
<div class="table container">
  <div class="cell left">50</div>
  <div class="cell middle">remaining width</div>
  <div class="cell right">60</div>

Or you could simply use the .container background color to act as the .middle "background" color....

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

.left  {float:left;  width:50px; background: #0bf; }
.middle{float:left;  overflow:auto;}
.right {float:right; width:60px; background: #bf0; }

.container{background: #fb0; overflow:auto;}
<div class="container">
  <div class="left">50</div>
  <div class="middle">remaining width (not actually)</div>
  <div class="right">60</div>