Question

I have a div that contains a ul and in each li there is a picture. I have floated the pictures left to get them to line up in a straight line however once it reaches the end of the div, it wraps. I would like the pictures to continue on to the right, hidden, so that I am able to create a carousel. My code is below.

The HTML

<div id="container">
    <div class="lfbtn"></div>
    <ul id="image_container">
        <li class="the_image">
            <img src="" />
        </li>
    </ul>
    <div class="rtbtn"></div>
</div>

The CSS

#container {
    width: 900px;
    height: 150px;
    margin: 10px auto;
}

#image_container {
    position: relative;
    left: 50px;
    list-style-type: none;
    width: 700px;
    height: 110px;
    overflow: hidden;

}

#image_container li {
    display: inline-block;
    padding: 7px 5px 7px 5px;
    float: left; 
}

.lfbtn {
    background-image: url(../../img/left.gif);
    background-repeat: no-repeat;
    margin: 10px;
    position: relative;
    float: left;
    top: -12px;
    left: 50px;
    height: 90px;
    width: 25px;
}

.rtbtn {
    background-image: url(../../img/right.gif);
    background-repeat: no-repeat;
    height: 90px;
    width: 25px;
    margin: 10px;
    position: relative;
    top: -101px;
    left: 795px;
}

Thanks in advance!

Answer 1

Update your style to reflect this:

<div id="container">
    <div class="lfbtn"></div>
    <div style="width: 700px; overflow: hidden;">
        <ul id="image_container" style="width: 1000000px;">
            <li class="the_image">
                <img src="Untitled-1.gif" />
            </li>
        </ul>
    </div>
    <div class="rtbtn"></div>
    <br style="clear: both;" />
</div>

You need to set the width on a div that wraps the UL, then set overflow on that. Set your UL to have some wild width so that it will never wrap even with a lot of LI’s.

To be honest I am not sure why the UL will not handle this the same as a DIV, even when the UL is set to display block. Any CSS guru care to comment.