Question

I’m making some stuff using jQuery. Sometimes I have, for example, a bunch of images in a list. This is a horizontal list (so every image is displayed from left to right). This list is so big that only 9 of the 30 images are displayed in the page (depending on youre screen resolution). So i’m using jQuery to slide from left to right (if youre mouse is on de left side of the screen, it scrolls to the left and vice versa).

To get this working, my list is wrapped in a div. This div uses a width of 999999px. So the images can go up to a width of 999999px until a next row of images is displayed. Because the list automatically lists everything horizontal until the next image doesn’t fit the page anymore, this next image is then displayed in a new row. So what I get is a 3×3 ‘table’ when i’m not using the extra div. When i’m putting a div around the whole thing with a width of 999999px, the list is horizontal up to 999999px and after that it makes a new row.

My question is: Is there an easier way to perform this?

Can I set my width to: width:infinite; or something like that? Or am I doing this whole thing wrong?

Hopefully I’ve made my self clear in my average english. Thanks in advance!

HTML:

<div id="images">

    <ul id="listimages">  
                    <li><img src="img/set1/1.jpg"/></li>
                    <li><img src="img/set1/2.jpg"/></li>
                    <li><img src="img/set1/3.jpg"/></li>
                    <li><img src="img/set1/4.jpg"/></li>
                    <li><img src="img/set1/5.jpg"/></li>
                    <li><img src="img/set1/6.jpg"/></li>
                    <li><img src="img/set1/7.jpg"/></li>
                    <li><img src="img/set1/8.jpg"/></li>
                    <li><img src="img/set1/9.jpg"/></li>    
                    <li><img src="img/set1/10.jpg"/></li>
                    <li><img src="img/set1/11.jpg"/></li>
                    <li><img src="img/set1/12.jpg"/></li>
    </ul> 
</div>

CSS:

  body {
background: black;
color:white;
}
#images{
float:left;
}
ul#listimages{
width:100%;
list-style-type:none;
overflow: hidden;
}
ul#listimages li {
display: block; 
float: left;
}
 ul#listimages img {
height:200px;
width:400px;
}

Answer 1

That is the simplest way to do it.

Note that some browsers (read: Chrome) have trouble with enormously wide elements; you should probably set any elements that aren’t visible to display: none.