title: Is width required to float two divs side by side using float:left property?
body: <p>When I first learned HTML, I was told that if you want to float 2 divs side by side using <code>float:left</code>, you must set a width on those two elements. This is because a div, by default, is a block element, which will take up the full width it has available to it.</p>
  
  <p>As I've built various projects, I have come across cases where floating did not work without setting a width, but then in other cases, it seems a width is not needed, and the float itself will restrict the elements width.</p>
  
  <p>For example, the following <a href="http://jsfiddle.net/flyingL123/ytggLv2b/" rel="nofollow">fiddle</a> shows two elements floating side by side only using the float property, no width was required.</p>
  
  <pre><code>&lt;style&gt;
      .left{
          background-color:yellow;
          float:left;
      }
  
      .right{
          background-color:green;
          float:left;
      }
  &lt;/style&gt;
  
  &lt;div class="left"&gt;
      Floating left
  &lt;/div&gt;
  &lt;div class="right"&gt;
      Floating left
  &lt;/div&gt;
  </code></pre>
  
  <p>However, in other similar scenarios that I can't seem to reproduce right now, applying the float property to two <code>divs</code> does not allow them to float side by side unless a width is a set for both.</p>
  
  <p>Am I losing my mind or is there some scenarios for which this behavior varies?</p>