Horizontally scrolling list of images

Question

I'm trying to create a horizontally scrolling list. I'm going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work fine without Javascript on reasonably modern browsers (any suggestions that uses Javascript in any way is off).

My current markup/css works, but here's what I don't like about it:

• The current markup specify a very wide ul (i.e. 10000px) and a container that scrolls on this. Is there a way to avoid this and instead have the width expands based on its content (i.e. the blue background shouldn't be there)?
• There are two extraneous divs (those with id #extra1, #extra2) that is just for styling purpose. Is there a way to eliminate this extra div?
• If there is not enough image to fill the page width, the scrollbar should collapse, but currently it does not because I have a very wide ul which cannot collapse.
• The <a> tag are separated by the horizontal list, I preferably want to keep them together. Is there a way to have them close together and cleanly separate them in CSS?

Aside, do you know of any tutorials that discussed this sort of thing? I've seen several tutorials that demonstrated having the whole page to scroll, and I took some ideas from those, but I can't find any that demonstrated scrolling ul/ol element.

Extra info that might help:

• The width of the page is static (i.e. it is not fluid/elastic layout).
• The images in the page is dynamically generated from PHP, and the number of images can change.
• The width of the thumbnails are well-defined.

Stripped down live example: http://dl.dropbox.com/u/17261360/horiz.html

Answer 1

Update (2018): The original solution based on display: inline is over 7 years old now. In today's world, I would recommend the flexbox approach, because it gives you full control over the gaps that appear between the images.

---

Using flexbox

Check browser compatibility first (you're probably fine), and add prefixes as needed.

ul.images {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>

---

Using display: inline

This works for me, tested in Firefox 4 beta 10, would be advisable to test it in IE as well:

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  display: inline;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>

The trick in the CSS is to set the lis to display: inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done. You cannot specify a size on inline elements, but they will be stretched to fit the img elements inside them. The scrolling is then simply overflow-x: auto on the parent ul element.

Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.

---

Using display: inline-block

Similar to the previous approach, but allowing us to set a size on each individual image block:

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  display: inline-block;
  width: 150px;
  height: 150px;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>