title: Make div width go to max-width
body: <p>I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.</p>
  
  <p>I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;nav id="sidebar-left"&gt;Left&lt;/nav&gt;
      &lt;section id="page"&gt;Center&lt;/section&gt;
      &lt;div id="sidebar-right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  
  
  #container{
      min-width:1024px;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      min-height: 100%;
  }
  
  #sidebar-left{
      min-width: 230px;
      max-width: 387px;
      float: left;
      background: red;
      height: 300px;
  }
  #sidebar-right{
      min-width: 230px;
      max-width: 387px;
      float: right;
      background: blue;
      height: 300px;
  }
  #page{
      min-width: 514px;
      margin: 0 20px;
      max-width: 626px;
      float: left;
      background: purple;
      height: 300px;
  }
  </code></pre>
  
  <p>And I also made a fiddle:</p>
  
  <p><a href="https://jsfiddle.net/1y59nuxz/" rel="nofollow">https://jsfiddle.net/1y59nuxz/</a></p>
  
  <p>I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.</p>
  
  <p>EDIT: I need this to be compatible with IE9+</p>