I have an outer div, and inside of that, I have an inner div which contains a list of images. When the images are wider than the outer div, I want to have it scroll horizontally, but instead, it just puts the image on the next line instead of expanding. If I add many rows, the div does scroll vertically, but horizontally, it doesn't do it. This happens on every browser I've tried - Firefox, Chrome, IE, and Safari.

Here is the css:

#grid-container   { left:33px; position:relative; width:300px; }
#grid   { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul   { width:305px; }
#grid-container li   { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }

.image-row   { float:left; margin-left: 10px; }
.grid-image   { height:50px; margin-left:-20px;  }

Here is the html:

<div id="grid-container">
  <div id="grid"> 
    <div id="row1" class="image-row"> 
      <ul> 
        <li> 
          <img id="img1" class="grid-image" src="images/img1.jpg"> 
        </li>
        <li>
          <img id="img2" class="grid-image" src="images/img2.jpg"> 
        </li>
        <li>
          <img id="img3" class="grid-image" src="images/img3.jpg"> 
        </li>
        <li>
          <img id="img4" class="grid-image" src="images/img4.jpg"> 
        </li>
      </ul>
    </div>
    <div id="row1" class="image-row"> 
      <ul> 
        <li> 
          <img id="img5" class="grid-image" src="images/img5.jpg"> 
        </li>
        <li>
          <img id="img6" class="grid-image" src="images/img6.jpg"> 
        </li>
      </ul>
    </div>
  </div>
</div>

The problem is img4 is showing on the second row (with img5 and img5 on the third row), even though it should on the first row and the grid div should scroll horizontally. It does scroll vertically. Can I force the div to expand? If I remove the width from the grid div, I do get the horizontal scroll bar, but the image is still on the second row.