Stop images from wrapping when div width is to small

css, html

Solution

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.

Problem

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!

Original source