Float left divs going to the next line

Question

I have something similar below:

<div style="float:left;margin-left:5px;">Test</div> 

The problem is that I need this div to be repeated several times. If it repeats many times, instead of forcing you to scroll to the right to see the rest (for example, I want it to be), it goes to the next line instead.

Example problem: http://jsfiddle.net/ruh7z/1/

Any help with this would be great, thanks

Answer 1

This behavior is what the float should do. If you use table-cell for your display style, this may give you more than what you expect. Note that when using table-cell you will need to use indents instead of fields,

 .container div { display: table-cell; padding-left: 5px; } 

Here is an example of this in use.

Answer 2

put the div in a fixed width div container and prevent overflow. then you have buttons or anything on each end of the div container to “slide” the child divs to the left or right.