title: CSS Wordwrap not working as expected
body: <p>Based on my earlier <a href="https://stackoverflow.com/questions/16017893/why-are-my-divs-overlapping">thread</a> I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.</p>
  
  <p>With my short text the two divs align correctly, but when I add loner text it drops below the image.  Can anyone explain why this is happening and how do I fix it?</p>
  
  <p>My <strong><a href="http://jsfiddle.net/thetoolsmith/JVhQB/2/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container" style="overflow: hidden; width: 100%"&gt;
  &lt;div class="left"&gt;
      &lt;img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" /&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
      &lt;div style="word-wrap: break-word;"&gt;Some long text here Some long text here Some long text here Some long text here Some long text here &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
  }
  
  div.left {
  padding:5px;
  float: left;
  }
  
  div.right { 
  float: left;
  }
  
  .thumb-small{
  width:35px;
  height:35px;
  border: 1px solid #B6BCBF;
  }
  </code></pre>