title: css fluid layout with fixed column
body: <p>I want to have a fluid content-column and a fixed-width sidebar. If browser resizes and content-column gets to small, a media query puts the sidebar below the content.</p>
  
  <p>OK here is what I have @ <a href="http://jsfiddle.net/x5fb4/" rel="nofollow">jsfiddle</a></p>
  
  <p>… the css:</p>
  
  <pre><code>section {
      width: 100%;
  }
  #wrap {
      margin: 0 auto;
      max-width: 600px;
      width: 100%;
  }
  #col1 {
      float: left;
      width: 200px;
      height: 100px;
      background: lightgreen;
  }
  #col2 {
      width: 100%;
      height: 100px;
      background: lightblue;
  }
  @media only screen and (max-width: 400px) {
      #col1 {
          float: none;
          width: 100%;
      }
  }
  </code></pre>
  
  <p>… html:</p>
  
  <pre><code>&lt;section&gt;
      &lt;div id="wrap"&gt;
          &lt;div id="col1"&gt;&lt;/div&gt;
          &lt;div id="col2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I know that this is exactly the other way round. I want col2 to have a fixed width and to be on the right side. If I change the float-value to "right", col1 will be on the right side, which is wrong. If I swap all values of #col1 and #col2, col2 will appear below col1 which is also not my intention.
  I can't use flex box, because of limited browser support.</p>
  
  <p>How can I solve this?</p>
  
  <p>Thx in advance!</p>