title: IE7 doesn't put sentence a child row, cutting sentence
body: <p>There are a lot of varying length tag divs in tag wrapper div. There isn't any problem for IE8,9, FF,Chrome,Safari and opera but it broken for IE7. How can I fix this issue?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="tag-wrapper"&gt;
      &lt;div class="tag"&gt;&lt;a href="#"&gt;text text text&lt;/a&gt;&lt;/div&gt;
      &lt;div class="tag"&gt;&lt;a href="#"&gt;text text&lt;/a&gt;&lt;/div&gt;
      &lt;div class="tag"&gt;&lt;a href="#"&gt;text text&lt;/a&gt;&lt;/div&gt;
      &lt;div class="tag"&gt;&lt;a href="#"&gt;text text text&lt;/a&gt;&lt;/div&gt;
      &lt;div class="tag"&gt;&lt;a href="#"&gt;text text text text&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tag-wrapper{
      float: left;
      height: 200px;
      padding: 12px 12px 12px 20px;
      width: 500px;
      overflow:hidden;
      border:1px solid #000;
   }
  
  .tag-wrapper .tag{
      background:url(img/corner02.png) no-repeat 0 0; 
      vertical-align:middle;
      padding: 0 0 0 10px;
      display:inline-block;
      height:24px;
      margin: 0 10px 9px 0;
      float:left;    
  }
  
  .tag-wrapper .tag a:link{
      width:auto;
      overflow:visible;
      height:24px;
      line-height:24px;
      padding:0 5px 0 5px;
      background:#F00;
      float:left;
      color:#FFF;
      text-decoration:none;
      font-weight:bold;   
   }
  
  .tag-wrapper .tag a:hover{
      color:#000;   
   }
  </code></pre>
  
  <p>Screenshot for IE8,IE9,Chrome,Firefox,Safari,Opera</p>
  
  <p><img src="https://i.stack.imgur.com/Ef8zs.jpg" alt="enter image description here"></p>
  
  <p>Screenshot for IE7</p>
  
  <p><img src="https://i.stack.imgur.com/WA6zv.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/B7Tjw/2/" rel="nofollow noreferrer">http://jsfiddle.net/B7Tjw/2/</a></p>