title: How to make a div fill up remaining horizontal space
body: <p>I have two divs.  One that is floated left and one floated right.  The one of the left has a width set to 18% and a min-width of 217px.  I want to have the div on the right take up the remaining space, while also being able to resize to fit the window.  </p>
  
  <p>The problem I am having is that I can set the right div's width to 82% and to float right, which works until I make the window side too small, in which case the min-width of the left div kicks in and it stops shrinking.  The right div doesn't have enough space to fit, so it is pushed down.</p>
  
  <p>Here's some sample code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="div1"&gt;
         stuff inside of it
      &lt;/div&gt;
      &lt;div id="div2"&gt;
         stuff inside of it
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre><code>    #div1
      {
       float: left;
       width: 18%;
       height: 100vh;
       min-width: 130px;
       box-shadow: 0px .3em .2em #000;
       z-index: 2;
      }
  
      #div2
      {
       width: 82%;
       float: right;
       z-index: 1;
      }
  </code></pre>
  
  <p>So this is where I'm stuck, how should I approach fixing div2?  I've tried using a table instead of divs, but a border appeared around the cells that I couldn't change and it removed my box-shadow, so I would prefer a solution without it.</p>