how do I make overflowing and float positioned elements stay all on one line?

Question

<div id='wrapper'>
   <ul>
      <li><img src='1.jpg' /></li>
      <li><img src='2.jpg' /></li>
      <li><img src='3.jpg' /></li>
      <li><img src='4.jpg' /></li>
      <li><img src='5.jpg' /></li>
   </ul>
</div>

#wrapper {
   width: 300px;
   height: 55px;
   overflow: auto;
}
li {
   float: left;
}

above is the gist of my html and css and currently the auto-scroll creates a vertical only scrollbar. I would like to make it so that it creates a horizontal only scrollbar, how would I do this?

Answer 1

Found one of previous post on same issue.

"You shouldn't get both horizontal and vertical scrollbars unless you make the content large enough to require them.

However you typically do in IE due to a bug. Check in other browsers (Firefox etc.) to find out whether it is in fact only IE that is doing it.

IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:

overflow: auto; overflow-y: hidden; You may also need to add for IE8:

-ms-overflow-y: hidden; as Microsoft are threatening to move all pre-CR-standard properties into their own ‘-ms’ box in IE8 Standards Mode. (This would have made sense if they'd always done it that way, but is rather an inconvenience for everyone now.)

On the other hand it's entirely possible IE8 will have fixed the bug anyway."

CSS div element - how to show horizontal scroll bars only?

Answer 2

You have to add the width of all images to your ul. Also see my jsfddle.

#wrapper ul {
   width: 2000px; /* if the sum of all images widthes is 2000px */
}

Answer 3

Add:

#wrapper ul {
   height: 55px;
}

What you doing wrong, is that there are no elements witch creates horizontal scroll bar. So you have to create one. UL element is perfect for that.