title: Div with fixed with and div with flexible width next to each other
body: <p>In a container which has a 2% padding left and right, I have two div boxes. The left div box has a fixed width of 200px and a fixed margin-right of 60px. I would like the right div to adjust its width the smaller/bigger the browser window gets. How do I achieve that the width of the red box always (independent of the browser width) fills up until the start of the rigth padding of the container, while the blue div keeps its 200px?</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/3vhrst19/3/" rel="nofollow">http://jsfiddle.net/3vhrst19/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="fixed-width"&gt;&lt;/div&gt;
  
      &lt;div id="flexible-width"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      float: left;
      width: 100%;
      padding: 50px;
      background: lightgrey;
  }
  
  #fixed-width {
      float: left;
      width: 200px;
      height: 500px;
      margin-right: 60px;
      background: blue;
  }
  
  #flexible-width {
      float: left;
      width: 500px; /* my goal is that the width always fills up independent of browser width */
      height: 500px;
      background: red;
  }
  </code></pre>