Horizontal scrolling?

Question

I'm not sure where I saw this before, but I'm sure there is a way to do horizontal scrolling.

Say, for example, you have several DIVs, this is ff: structure:

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

I need a way so that it is aligned horizontally and not interrupted until the next line. And instead of vertical scrolling there will be horizontal scrolling.

Usually, if I did float: left or display: inline, after the div fills a fairly horizontal space, it will go to the next line. Is there a way to make it align in a straight horizontal line and do an h-scroll for this?

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> 

Answer 2

You do not need to set the width in CSS. Setting the width is bad, since it does not allow you to scale the value that you need to change the width each time you create a new element. Instead, you must specify the .container a white-space: nowrap and set your display children to inline-block . For example.

 .container { white-space: nowrap; } .container > div { display: inline-block; } 

Now you no longer need to set the width to get this horizontal scroll function.