title: Auto Div width with img's inside
body: <p>Working on a custom image slider set up as follows;</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="frameDiv"&gt;
      &lt;div id="containerDiv"&gt;
          &lt;img class="sliderImage" /&gt;
          &lt;img class="sliderImage" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#frameDiv {
     height: 200px;
     width: 450px;
     overflow:hidden;
     white-space: normal;
  }
  
  #containerDiv {
     position: relative;
     height: 200px;
  }
  
  .sliderImage {
     max-height: 200px;
     min-height: 200px;
     min-width: 134px;
     margin-right: 7px;
     float:left;
  }
  </code></pre>
  
  <p>I have the <code>#containerDiv</code> width set with <code>jQuery</code> right now and the Slider is working as expected, with the click of a button the slider slides over and more images are then displayed in view. However the images are now being added dynamically and each image width is not the same. So I would like to have the <code>#containerDiv</code> width automatically set according to how wide the images are in <code>CSS</code>. I have tried to set <code>float: left</code> and <code>display: inline-block</code> to the <code>.sliderImage</code> I've also tried to set <code>white-space: nowrap;</code> on <code>#containerDiv</code>. Nothing seems to work. All of the images get pushed down below each other to the next line when they need to be all on the same line and then they will be hidden with the overflow setting. Is there a way to do it without <code>JavaScript</code> or <code>jQuery</code>?</p>
  
  <p><strong>Edit:</strong> 
  I took out the overflow:hidden on this jsfiddle so you can see how it wraps down.
  <a href="http://jsfiddle.net/ut3o3pg3/" rel="nofollow">http://jsfiddle.net/ut3o3pg3/</a></p>