Question

I’m trying to build an image slider (no problems with the js!):

<div id="wrapper">
   <div id="inside">
      <img src="pic1">
      <img src="pic2">
      <img src="pic3">
      <img src="pic4">
   </div>
</div>

with the following style:

#wrapper{position:relative; width:300px; overflow:hidden;}
#inside{position:relative;}
#inside img{width:140px;}

When the width of the images (pic1,2,3,4) is greater than the width of the #wrapper(i.e. 300px), the rest of the images are moved to another line, i.e, instead of

pic1 pic2 pic3 pic4

I get

pic1 pic2
pic3 pic4

How can I fix this.

Answer 1

Increase the size of your #inside div to the size of your images and just hide all that extra space with overflow:hidden in your #wrapper div.

So it will be something like this:

#wrapper{position:relative; width:300px; overflow:hidden; }
#inside{position:relative; width:500px; }