title: Horizontally scrolling list of images
body: <p>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).</p>
  
  <p>My current markup/css works, but here's what I don't like about it:</p>
  
  <ul>
  <li>The current markup specify a very wide ul (i.e. 10000px) and a container that scrolls on this. <em>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)?</em></li>
  <li>There are two extraneous <code>div</code>s (those with id <code>#extra1</code>, <code>#extra2</code>) that is just for styling purpose. <em>Is there a way to eliminate this extra div?</em></li>
  <li>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.</li>
  <li>The <code>&lt;a&gt;</code> tag are separated by the horizontal list, I preferably want to keep them together. <em>Is there a way to have them close together and cleanly separate them in CSS?</em></li>
  </ul>
  
  <p>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.</p>
  
  <p>Extra info that might help:</p>
  
  <ul>
  <li>The width of the page is static (i.e. it is <strong>not</strong> fluid/elastic layout).</li>
  <li>The images in the page is dynamically generated from PHP, and the number of images can change.</li>
  <li>The width of the thumbnails are well-defined.</li>
  </ul>
  
  <p>Stripped down live example: <a href="http://dl.dropbox.com/u/17261360/horiz.html" rel="noreferrer">http://dl.dropbox.com/u/17261360/horiz.html</a></p>