浮动左div到下一行

Question

I have something similar to below:

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

The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.

Example of the issue: http://jsfiddle.net/ruh7z/1/

Any help with this would be great, thanks

Answer 1

That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell .

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

Here's a sample of this in use.

Answer 2

put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.