title: Prevent text from expanding shrink wrapped div
body: <p>I have a holder div that's shrink wrapped around a couple other divs, so the holder doesn't have a set width. Also inside the holder is another div that contains text. When there's too much text it's expanding the holder so it's not shrink wrapped anymore. Here's a demo of my problem, <a href="http://jsfiddle.net/WSbAt/" rel="noreferrer">http://jsfiddle.net/WSbAt/</a>. This is for a photo gallery page.</p>
  
  <p>I'm thinking there might not be a way without setting the width of the holder, which I can't do since the number of images per row is dynamic. I can probably figure it out with jQuery, but was hoping there's a css solution.</p>
  
  <p>Edit: I'm trying not to specify any widths since the number of thumbnails per row is based on your window size.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/WSbAt/" rel="noreferrer">http://jsfiddle.net/WSbAt/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#container
  {
      width:600px; /*only set for demo. will be random on live page*/
      border:1px solid black;
      text-align:center;
  }
  #holder
  {
      display: inline-block;
      border:2px solid blue;
  }
  .thumbnail
  {
      float:left;
      width:100px;
      height:100px;
      background-color:red;
      margin-right:10px;
      margin-bottom:10px;
  }
  .expandedHolder
  {
      padding:10px;
      border:2px solid yellow;
      margin-bottom:10px;
      margin-right:10px;
  }
  .fullImage
  {
      float:left;
      width:250px;/*only set for demo. will be random on live page*/
      height:200px;
      background-color:green;
  }
  .text
  {
      float:left;
      margin-left:10px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="holder"&gt;
          &lt;div class="thumbnail"&gt;&lt;/div&gt;
          &lt;div class="thumbnail"&gt;&lt;/div&gt;
          &lt;div class="thumbnail"&gt;&lt;/div&gt;
          &lt;div class="thumbnail"&gt;&lt;/div&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
          &lt;div class="expandedHolder"&gt;
              &lt;div class="fullImage"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;some text here. some text here. some text here. &lt;/div&gt;
              &lt;div style="clear:both;"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>