ansaurus

Question

Stop images from wrapping when div width is to small.

Answer 1

+3 A:

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.

Dustin Laine 2010-03-18 20:04:28

Sorry but that does not work. simply adding the overflow: hidden; didn't have an effect on the page. I even tried removing it from the #image_container and that maintained the width and the images spilled out over the page.

2010-03-18 20:09:07

Check my updated answer

Dustin Laine 2010-03-18 20:14:21

Can you post your url or the images you are using. At least the dimensions of your images.

Dustin Laine 2010-03-18 20:17:09

Unfortunately its on my desktop so there is no url, the thumbnails are 130x90 though..I tried to specify the width but no change....Maybe if you could post an edit to my css with the changes required.

2010-03-18 20:24:23

Check my update.

Dustin Laine 2010-03-18 21:25:41

Thank you very much! I really appreciate the help!

2010-03-18 21:35:08

Glad it worked!

Dustin Laine 2010-03-18 21:47:26

Answer 2

+1 A:

Here's an working SSCCE with the minimum required styles to get it to work:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2472979</title>
        <style>
            #images {
                width: 700px;
                height: 100px;
                overflow: hidden;
                white-space: nowrap;
            }
            #images li {
                list-style-type: none;
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="images">
            <ul>
                <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li>
                <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li>
                <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li>
            </ul>
        </div>
    </body>
</html>

You see, the key is whitespace: nowrap;. If you want to make it a fullworthy carousel, just replace overflow: hidden; by overflow-x: scroll; and overflow-y: hidden;.

Edit: @Pool, please grow up and cut out all those serial downvotes. Thank you.

BalusC 2010-03-18 21:35:49

ansaurus

tags:

views:

answers:

Stop images from wrapping when div width is to small.

related questions