title: Why `float:left` doesn't work with a fixed width?
body: <p>I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.</p>
  
  <p>This sounds so simple that I though the following Markup and CSS would give me the desired result:</p>
  
  <pre><code>&lt;div class="left"&gt;Content&lt;/div&gt;
  &lt;div class="right"&gt;Content&lt;/div&gt;
  
  div.left {
      float: left;
      width: 200px;
  }
  
  div.right {
      width: 200px;
  </code></pre>
  
  <p>This doesn't work as expected, instead the right div appears on the next line as though it wasn't floated. This is best explained in this example webpage:</p>
  
  <p><strong><a href="http://commondatastorage.googleapis.com/stephenhill/float-left-fixed-width-problem.html">Example of the Problem</a></strong></p>
  
  <p><strong>My question is WHY this doesn't work as expected?</strong> Not how to fix it.</p>
  
  <p>Notes:</p>
  
  <ul>
  <li><strong>Please make sure you fully understand how floats work before answering this question.</strong></li>
  <li><strong>Please make sure you view and understand the examples.</strong></li>
  <li><strong>Both elements must be block, not inline.</strong></li>
  <li><strong>I understand all fixes/hacks to make this work. I want to know why it doesn't work.</strong></li>
  <li><strong>This appears to only work correctly in Opera.</strong></li>
  <li><strong>Backing up your answer with documentation is required.</strong></li>
  </ul>