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.
