overflow:hidden not working for li elements inside ul

Question

I'm trying to create a carousel from ul object where the li elements are blocks and ul is the carousel container. I've tried two approaches but neather seems to work, the overflow property is not functioning as I want it to.

Approach 1:

    <ul style="overflow:hidden; width:200px; height:120px; display:block;">
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
    </ul>

The problem with this approach is that elements don't stack horizontally when they overflow (which is what I want/expected). I suspect this is due to the display:block in the li elements, but they need to have fixed width/height, is there a way around this ?

Approach 2:

.ui-carousel
{
    display:block;
    overflow: hidden;
    list-style: none;
}

.ui-carousel-element
{
    margin:0;
    padding:0;
    display:block;
    border:2px solid black;
    float:left;
}

<ul style="width: 200px; height: 120px; padding-top: 20px;" id="pages" class="ui-widget ui-carousel">
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 0px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 100px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 200px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 300px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 400px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 500px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
</ul>

I use javascript to distribute the li elements and set their positions to absolute but then the overflow:hidden property is 'ignored' because li elements still show up outside of the ul container bounds.

So the question is how to get ul to horizontally stack fixed size li blocks and hide the ones that overflow ?

Answer 1

I don't see a display:hidden added in your second approach...

The overflow property needs to be set on the parent <ul> for the overflowing list-elements to be hidden.

And for your first approach, I'd recommend using an outer <div>. This would be the bounding box, hiding overflowing li-elements.

<div style="overflow: hidden; width: 200px; height: 120px;">
   <ul style="height: 120px;">
      <li>Whatever</li>
      <li>More stuff</li>
      <li>Even more</li>
   </ul>
</div>

Then apply the list element styles as before, with floats and blocks.

Answer 2

Add position: relative to the .ui-carousel in your second approach. Absolutely positioned elements are taken out of the flow. If you don't relatively position the ul, the list items are positioned relative to the viewport, ignoring the overflow on their parent.

Also, you can remove the display: block on the list items. The display property is largely ignored on floats.