title: Twitter Bootstrap breaking contents of div with several elements inside
body: <p>I am using bootstrap to develop a responsive site. </p>
  
  <p>I have two containers that have content which I don't want to break onto new lines if the window is resized. </p>
  
  <p>I currently have this <a href="http://jsfiddle.net/lharby/23j8F/1/" rel="nofollow">fiddle</a> which demonstrates.</p>
  
  <p>I thought using clearfix on the parent container for each news item would work. But the text is breaking from the image on resize. </p>
  
  <p>You can see this in <a href="https://dl.dropbox.com/u/66584/bs-site.png" rel="nofollow">this image</a></p>
  
  <p>Any clues?</p>
  
  <p>This is the basic css (although it's all in the fiddle): </p>
  
  <pre><code>   /* News items */
  .news-item {
      padding:10px 0 10px 10px;
  }
  
   .news-item p {
  padding:0;
  margin:0;   
  }
  
  .news-item img,
  .news-item-text {
  float:left;
  }
  
  .news-item-text {
  padding:0 0 0 5px;  
  }
  
  .news-heading {
  font-size:18px;
   }
  
   .news-tags {
  font-family:ffs-italic;
  font-size:12px; 
   }
  </code></pre>
  
  <p>This is the top of the html:</p>
  
  <pre><code>  &lt;div class="row"&gt;&lt;!-- breaking and buzzing --&gt;
              &lt;div class="span4"&gt;&lt;!-- breaking news --&gt;
                  &lt;h2&gt;Breaking&lt;/h2&gt;
                  &lt;div id="breakingNews" class="rounded clearfix"&gt;
                      &lt;div class="news-item clearfix"&gt;
                          &lt;a href=""&gt;
                              &lt;img src="img/news/sm/sq01.jpg" width="54" height="54" /&gt;
                          &lt;/a&gt;
                          &lt;div class="news-item-text"&gt;
                              &lt;p class="news-heading"&gt;&lt;a href=""&gt;Omni Scents to launch...&lt;/a&gt;&lt;/p&gt;
                              &lt;p class="news-subheading"&gt;At vero eos fragrance line inspired&lt;/p&gt;
                              &lt;p class="news-tags"&gt;&lt;a href="" class="pink"&gt;BEAUTY&lt;/a&gt;, &lt;a href="" class="pink"&gt;PRODUCTS&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="news-item clearfix"&gt;
                          &lt;a href=""&gt;
                              &lt;img src="img/news/sm/sq02.jpg" width="54" height="54" /&gt;
                          &lt;/a&gt;
                          &lt;div class="news-item-text"&gt;
                              &lt;p class="news-heading"&gt;&lt;a href=""&gt;IFF finishes year strong...&lt;/a&gt;&lt;/p&gt;
                              &lt;p class="news-subheading"&gt;Lorem ipsum in dolor contratis&lt;/p&gt;
                              &lt;p class="news-tags"&gt;&lt;a href="" class="orange"&gt;INDUSTRY&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>