title: A div not staying on the same line of the float: left div
body: <p><strong>Why doesn't <code>#right</code> stay on the same line than the <code>float: left</code> div <code>#left</code>?</strong> whereas <em>when not setting a width</em> for <code>#right</code> the behaviour is normal (see 2nd code snippet below).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin:0; padding: 0; }
  #left {background-color: green; float: left; width: 200px; }
  #right {background-color: blue; width: 200px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
       &lt;div id="left"&gt;Left&lt;/div&gt; 
       &lt;div id="right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The strange thing is, <strong>when I don't put any width for #right</strong>, then it works. Why does adding a width setting for #right make everything change?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin:0; padding: 0; }
  #left {background-color: green; float: left; width: 200px; }
  #right {background-color: blue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
       &lt;div id="left"&gt;Left&lt;/div&gt; 
       &lt;div id="right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Note: the question is really here : why does setting a <code>width</code> change wrapping / not wrapping? The answer to this is not obvious in <a href="https://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work">this related question</a>.</em></p>