title: Stop images from wrapping when div width is to small
body: <p>I have a div that contains a ul and in each li there is a picture. I have floated the pictures left to get them to line up in a straight line however once it reaches the end of the div, it wraps. I would like the pictures to continue on to the right, hidden, so that I am able to create a carousel. My code is below.</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="lfbtn"&gt;&lt;/div&gt;
      &lt;ul id="image_container"&gt;
          &lt;li class="the_image"&gt;
              &lt;img src="" /&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="rtbtn"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>#container {
      width: 900px;
      height: 150px;
      margin: 10px auto;
  }
  
  #image_container {
      position: relative;
      left: 50px;
      list-style-type: none;
      width: 700px;
      height: 110px;
      overflow: hidden;
  
  }
  
  #image_container li {
      display: inline-block;
      padding: 7px 5px 7px 5px;
      float: left; 
  }
  
  .lfbtn {
      background-image: url(../../img/left.gif);
      background-repeat: no-repeat;
      margin: 10px;
      position: relative;
      float: left;
      top: -12px;
      left: 50px;
      height: 90px;
      width: 25px;
  }
  
  .rtbtn {
      background-image: url(../../img/right.gif);
      background-repeat: no-repeat;
      height: 90px;
      width: 25px;
      margin: 10px;
      position: relative;
      top: -101px;
      left: 795px;
  }
  </code></pre>
  
  <p>Thanks in advance!</p>