title: Floating elements left in an overflow wrapper set to hidden
body: <p>I have a scenario where I need to show only six images at a time on my page. When you click on the next button, these six images will slide out and the next six images will slide in. Here is my html</p>
  
  <blockquote>
  <pre><code>&lt;div class="thumbScroll"&gt;
      &lt;ul class="featuredThumbs"&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-01.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-02.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-03.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-04.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-05.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-06.jpg"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="featuredThumbs"&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-07.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-08.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-09.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-10.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-11.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-12.jpg"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="featuredThumbs"&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-13.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-14.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-15.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-16.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-17.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="/App_Themes/2011/images/home-prop-thumb-18.jpg"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>I would assume that if I floated .featuredThumbs to the left, the would display inline. Then, I would have a wrapper called thumbScroll with an overflow of hidden so that only 6 items at a time show. This wrapper I have given a height and width.</p>
  
  <p>So that when I click on my next button, the first six slide out the the left and the next six slide in from the right.</p>
  
  <p>My problem is though, that all 18 items in this case are below one another and not floated to the left.</p>
  
  <p>How do I float these items to the left in a wrapper with the overflow set to hidden.</p>