title: How to make the overflow CSS property work with hidden as value
body: <p>I am having a tough time with <code>overflow: hidden</code>.</p>
  
  <p>Basically, I am trying to hide the overflow of an unordered list which is located in a <code>&lt;div&gt;</code>.</p>
  
  <p>I have no idea why this isn't working though.</p>
  
  <p>Instead of hiding it, it breaks my list from a horizontal layout to a vertical layout.</p>
  
  <p>The unordered list is carousel and the container is list.</p>
  
  <p>Below is my CSS code;</p>
  
  <pre><code>div.body .container .images {
      background: url(/images/images-background.jpg);
      height: 62px;
      margin-bottom: 17px;
      width: 384px;
  }
  div.body .container .images #images-previous {
      cursor: pointer;
      float: left;
  }
  div.body .container .images #images-next {
      cursor: pointer;
      float: left;
  }
  div.body .container .images .list {
      float: left;
      overflow: hidden;
      vertical-align: top;
      width: 336px;
  }
  div.body .container .images .carousel {
      margin-bottom: 6px;
      margin-top: 8px;
      width: 336px;
  }
  </code></pre>
  
  <p>Here, my HTML;</p>
  
  <pre><code>&lt;div class="images"&gt;
      &lt;div id="images-previous"&gt;
          &lt;img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" /&gt;
      &lt;/div&gt;
      &lt;div class="list"&gt;
          &lt;ul class="carousel"&gt;
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt; 
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;    
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /&gt;
                  &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /&gt;
                  &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /&gt;
              &lt;/li&gt;
              &lt;!--
              &lt;cfset i=1&gt;
                  &lt;cfloop condition="i lte images.recordcount"&gt;
                      &lt;cfoutput&gt;
                          &lt;li&gt;
                              &lt;img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" /&gt;
                              &lt;img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" /&gt;
                              &lt;img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" /&gt;
                          &lt;/li&gt;
                      &lt;/cfoutput&gt;
                      &lt;cfset i=i+1&gt;
                  &lt;/cfloop&gt;
              &lt;/cfset&gt;
              --&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="images-next"&gt;
          &lt;img src="/images/images-next.jpg" width="24" height="62" alt="Next" /&gt;
      &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>