title: Fluid floated element next to fixed-width floated element
body: <p>Here's my simple markup:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col fixed"&gt;Short text&lt;/div&gt;
    &lt;div class="col fluid"&gt;Longer text....&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's my CSS:</p>
  
  <pre><code>.row {
      padding: 20px;
  }
  .row:after {
      content: "";
      display: block;
      clear: both;
  }
  
  .col {
      float: left;
  }
  .col.fixed {
      width: 200px;
  }
  </code></pre>
  
  <p>I thought the fluid text would appear next to the fixed column (to its right), and would then wrap down. This is not what actually happens. Instead, the whole <code>.col.fluid</code> drops under the other column, as if there were no floats.</p>
  
  <p><a href="http://jsfiddle.net/7cMQg/1/" rel="nofollow">The demo is here</a>.</p>
  
  <p>Why doesn't this work (isn't this how floats are supposed to work)? And what can I do to fix this?</p>