title: CSS 3 Column float (2 fixed, 1 dynamic)
body: <p>I'm designing a header which is made of 3 parts.</p>
  
  <p>The page must be fluid: <code>min-width:940px; max-width:1200px;</code></p>
  
  <p>The first two parts of the header will be fixed size:</p>
  
  <pre><code>   left       middle        right
  &lt;---------&gt;&lt;---------&gt;&lt;-----------------&gt;
     134px      183px       (Fill the remaining space)
  </code></pre>
  
  <p>I'd like the right part to change depending on the size of the page, I'll paste what I have so far but my problem is making it fill the gap completetly.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main"&gt;
  
  &lt;div class="left"&gt;&lt;/div&gt;
  &lt;div class="middle"&gt;&lt;/div&gt;
  &lt;div class="right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>    .main{
          margin:auto;
          min-width:940px;
          max-width:1200px;
          background-color:#000;
      }
  
      .left{
      float: left;
      width: 134px;
      height: 191px;
      background-color:#0000ff;
      }
      .middle{
      float: left;
      width: 183px;
      height: 191px;
      background-color:#ffff00;
      }
  
      .right{
      float: left;
      width: 60%;
      height: 191px;
      background-color:#ff0000;
      }
  </code></pre>