title: CSS 3 columns - First two fixed width, third remaining width
body: <p>I have 3 columns. <code>left</code>, <code>middle</code> and <code>right</code>. </p>
  
  <p><code>left</code> and <code>middle</code> are fixed-width, <code>right</code> should fill the remaining space.</p>
  
  <p>How can I accomplish this?</p>
  
  <p>Current HTML</p>
  
  <pre><code>&lt;div id="menu"&gt;
  
      &lt;div id="left"&gt;
      &lt;/div&gt;
  
      &lt;div id="middle"&gt;
      &lt;/div&gt;
  
      &lt;div id="right"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>LESS</p>
  
  <pre><code>#menu {
  
      width: 100%;
  
      #left {
          width: 20%;
          float: left;
      }
  
      #middle {
          width: 300px;
          float: left;
      }
  
  
      #right {
          overflow-x: hidden;
          float: right;
      }
  
  }
  </code></pre>