title: Allowing elements to float off the screen horizontally
body: <p>I'm in a bit of a pickle here, i have 6 <code>&lt;li&gt;</code> element sets in the same <code>&lt;ul&gt;</code>. <a href="http://jsbin.com/ixibed/1/edit" rel="nofollow">Here's a demo</a>. My goal is to allow the elements to overflow off the right of the page and I will cycle through them later with javascript. For some reason no matter what I try it just pushes the other elements down. i have tried:</p>
  
  <pre><code>float:left;
  
  display:inline-block;
  </code></pre>
  
  <p>every flavor of display actually, also tried <code>clear:both;</code> I have also tried setting the list in a div and setting the width to a ridiculous pixel width and hoping that would push it off the edge properly but it did nothing. </p>
  
  <p>Any ideas?</p>
  
  <p>I want to try to avoid javascript solutions, but everything is welcome.</p>
  
  <p>note:
  eventually these will be more that 20% width, each <code>&lt;li&gt;</code> will span the screen width and move in when jquery says so</p>