title: Image wrap with float doesnt work right
body: <p>I was googling hard but still didnt manage to find smth. </p>
  
  <p>Here's the code:</p>
  
  <pre><code>          &lt;div class="SingleNewsMain" news-type = "{$value.news_type_id}" &gt;
  
                      &lt;div class="NewsTitleMain"&gt;
                          &lt;a href= "index.php?show_news={$value.id}"&gt;&lt;!--{$value.title}--&gt;Some random header&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="NewsMainImage"&gt;
                          &lt;a href="#"&gt;
                              &lt;img src="img/13095.png"&gt;
                          &lt;/a&gt;    
                      &lt;/div&gt;  
  
                      &lt;div class="NewsMainShort"&gt; 
                          &lt;!--{$value.short_text}--&gt;
                          Some random description
                      &lt;/div&gt;
  
                      &lt;div class="NewsInfo"&gt;
                              &lt;span&gt;
                              &lt;icon class="icon-eye-open"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                              &lt;span class="ViewsInfo"&gt;2100&lt;/span&gt;                         
  
                              &lt;span&gt;
                              &lt;icon class="icon-comment"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                              &lt;span class="CommentaryInfo"&gt; 46&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>And here's my CSS</p>
  
  <pre><code>.SingleNewsMain{
    border-bottom: 1px solid rgb(175,175,175);
  }
  .NewsTitle {
    font-size: 24px;
    padding-top: 20px;
    line-height: 27px;
    font-family: 'Playfair Display SC';
  }
  
  .NewsTitleMain {
    font-size: 24px;
    padding-top: 20px;
    line-height: 25px;
    font-family: 'Playfair Display SC';
  }
  
  .NewsMainImage{
    padding: 10px 10px 5px 0px;
    width: 200px;
    height: 110px;
    float: left;
    clear: both;
  }
  .NewsMainShort {
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 30px;
    position: relative;
  }
  </code></pre>
  
  <p>And also two screenshots, the <strong>first</strong> one. <code>.NewsMainShort</code> has the property <code>clear:both</code></p>
  
  <p><a href="http://imageshack.us/photo/my-images/833/x7cp.png/" rel="nofollow">http://imageshack.us/photo/my-images/833/x7cp.png/</a></p>
  
  <p>And the <strong>second</strong> one, <code>.NewsMainShort</code> doesn't have the property <code>clear:both</code></p>
  
  <p><a href="http://imageshack.us/photo/my-images/96/jl29.png/" rel="nofollow">http://imageshack.us/photo/my-images/96/jl29.png/</a></p>
  
  <p>I want the text simply to wrap around the image without the looking like on the <strong>second screenshot</strong>.
  Inspect Element in Chrome shows, that when without the <code>clear:both</code> the image's DIV doesn't fit the <code>SingleNewsMain</code>'s height.</p>