title: Why is Opera wrapping a list that appears inline in all other browsers?
body: <p>I've placed an inline list with a width of 1400px inside a div with a width of 800px. The intention is that the list should function as a scrolling pane of image thumbnails for quick image access.</p>
  
  <p>However, while the code works as expected in Chromium (CoolNovo2), IE8 and FF10, Opera wraps the list for no reason that I'm able to figure out, or that I'm able to find a hint about online. A couple of images (I'm using jscrollpane to style the horizontal scrollbar):</p>
  
  <p><strong>Normal behaviour</strong>
  <img src="https://i.stack.imgur.com/yygG8.jpg" alt="enter image description here"></p>
  
  <p><strong>Opera</strong>
  <img src="https://i.stack.imgur.com/xTLXd.jpg" alt="enter image description here"></p>
  
  <p>The text in the grey box is a p tag wrapped in a span to apply the style - I thought this might be the problem as when I removed the text Opera applied the horizontal scrollbar as expected. However the image list still wrapped within the div, so the central problem remains: the vertical scrollbar being suppressed, the removal of the p element simply stopped the div from overflowing vertically, so the horizontal scrollbar appeared - but the list still wrapped.</p>
  
  <p>Here's the HTML I'm using (edited for brevity):</p>
  
  <pre><code>&lt;div id="thumbnails"&gt;
  &lt;ul id="imageList"&gt;
      &lt;li&gt;&lt;a href="#" id="chimg"&gt;&lt;img src="01_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg2"&gt;&lt;img src="02_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg3"&gt;&lt;img src="03_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg4"&gt;&lt;img src="04_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg5"&gt;&lt;img src="05_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg6"&gt;&lt;img src="06_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg7"&gt;&lt;img src="07_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg8"&gt;&lt;img src="08_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg9"&gt;&lt;img src="09_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg10"&gt;&lt;img src="10_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="chimg11"&gt;&lt;img src="11_thumb.jpg"&gt;&lt;/a&gt;&lt;/li&gt;              
  &lt;/ul&gt;
  
  &lt;p id="musicList"&gt;
      &lt;span&gt;&lt;a class="track" href="javascript:;" data-mp3="" data-ogg=""&gt;Link&lt;/a&gt;&lt;/span&gt;
      &lt;span&gt;&lt;a class="track" href="javascript:;" data-mp3="" data-ogg=""&gt;Link&lt;/a&gt;&lt;/span&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS (again edited to remove extraneous elements):</p>
  
  <pre><code> #thumbnails {
      height: 160px;
      margin: 0 auto;
      overflow: auto;
      padding-top: 10px;
      width: 800px;
  }
  #thumbnails ul {
      list-style: none;
  }
  #thumbnails li {
      display: inline;
  }
  #thumbnails ul#imageList {
      margin-bottom: 0;
      width: 1400px;
  }
  #thumbnails ul#imageList img {
      width: 112px;
  }
  #thumbnails ul#imageList a img {
      border: medium none;
  }
  #thumbnails p#musicList {
      width: 1400px;
  }
  #thumbnails p#musicList span {
      display: block;
      float: left;
  }
  </code></pre>
  
  <p>Any thoughts anyone?</p>