Как заставить CSS-свойство переполнения работать со скрытым как значение

Я понятия не имею, почему это не работает.

Вместо того, чтобы скрыть его, он разбивает мой список с горизонтального на вертикальный.

Неупорядоченный список - это карусель и контейнер - это список.

Ниже мой код CSS;

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;
}

Здесь мой HTML;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <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" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>