Why isn't my div scrolling horizontally when adding multiple images?

Question

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="row2" 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.

Answer 1

Will this do? I simplified it somewhat.

CSS (you can remove the borders, they are just so you can see what is happening):

#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}

HTML:

<div id="grid-container">
 <div id="grid">
  <ul>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
  </ul>
  <ul>
   <li><img src="testimage.jpg"></li>
   <li><img src="testimage.jpg"></li>
   <li><img src="testimage.jpg"></li>
  </ul>
 </div>
</div>

Answer 2

You need to put a white-space:nowrap; on the UL and LI tags. You also need the LI elements to be display inline rather than floating them.

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   { 
    display:inline;
   list-style-type:none; 
    padding:5px 15px 5px 15px; 
    height:88px; 
    margin:0;
    text-align:center; 
}

ul, li{
    white-space:nowrap;
}

HTML:

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

This works in latest versions of IE, FF, Safari and Chrome.

Answer 3

try this:

#grid-container li { 
  display: inline;
  list-style-type:none; 
  padding:5px 15px 5px 15px; 
  height:88px; 
  text-align:center;
  white-space: nowrap;
}

Answer 4

You're already on the right path: Your approach to set "float: left;" on the <li>s, in combination with setting "width: 305px" on the <ul>s should basically work to avoid float dropping.

However, a few things to check:

1. Are 305px really enough? (It must be at least as large as the combined width of the elements in row 1, including margins, paddings and borders) Try setting it to a much larger value. overflow: auto won't help, since the floats will always wrap instead of causing an overflow. Setting a large enough width works perfectly for me (at least in my own example).

Other things to try:

• Try it without floating ".image-row".
• Try setting a width on the images.
• You have the id "row1" twice in your HTML - that's invalid.