Question

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?

Answer 1

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>