Horizontal Scrolling?

css, html

Solution

This should work:

<div class="container">
  <div class="scroller">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
  </div>
</div>

<style>
.container {
  width:200px;
  overflow:scroll;
}
.scroller {
  width:1000px;
}
.content {
  width:200px;
  float:left;
}
</style>

Problem

I am not sure where i've seen this before, but im sure that there is a way to make horizontal scroll. Lets say, for example you have multiple DIVs is the ff: structure: ``` <div class="container"> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> </div> ``` Im looking for a way to make it align horizontally and without breaking to the next line. And there will be a horizontal scroll instead of vertical scroll. Normally if I did a float:left or display:inline, after the the div fill enough horizontal space it will go to next line. Is there anyway to make it align in a straight horizontal line and make a h-scroll for that?

Original source