How to make the overflow CSS property work with hidden as value
I am having a tough time with overflow: hidden.
Basically, I am trying to hide the overflow of an unordered list which is located in a <div>.
I have no idea why this isn't working though.
Instead of hiding it, it breaks my list from a horizontal layout to a vertical layout.
The unordered list is carousel and the container is list.
Below is my CSS 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;
}
Here, my 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>
Answer
Ok if anyone else is having this problem this may be your answer:
If you are trying to hide absolute positioned elements make sure the container of those absolute positioned elements is relatively positioned.