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!