Displaying images horizontally in a fixed with box w/ horizontal overflow.

Question

I have a div with a height of 500px and a width of 200px. Inside are a bunch of images that are floated left and all 180px wide and 500px high. With 10px padding left and right this means the div will show just one image on pageload.

I'd like this div to scroll horizontally, vertical scroll should be hidden. Because I set a fixed width on the div, the float doesn't seem to put the images next to each other but still beneath each other.

How can I force the images to be displayed next to eachother? How can I achieve horizontal scrolling, is css3 support required?

Answer 1

Try something like this

  #outer {
    width:500px;
    height:200px;
    position:relative;
    overflow:scroll;
  }

  #outer ul {
    display:block; 
    width:1000px;
  }
  #outer ul li {
    display:block;
    float:left;
  }
  img{
    height:180px;
    width:480px;
    padding:10px;

  }

  <div id="outer">

      <ul>
        <li><img href="http://lechart.dk/wp-content/uploads/2009/05/nerd.jpg" /></li>
        <li><img href="http://mynotetakingnerd.files.wordpress.com/2009/07/note-taking-nerd.jpg" /></li>
      </ul>

  </div>

Working example http://jsbin.com/ineya4/2/edit

Answer 2

You will need to use overflow-x: scroll; on your containing div.

div.container {overflow-x: scroll; overflow-y:hidden; width: 100px; height:500px;}
div.image {width:100px; height:500px; float:left;background:#890;}

<div class="container">
    <img class='image' />

    <img class='image' />

    <img class='image' />

    <img class='image' />

    <img class='image' />
</div>