force float:left divs to dont go to next line

Question

lets say I got 20 same divs with float:left property and some width. I want them to be in one line and if they dont fit in screen just to make page scroll horizontally.

fiddle

Answer 1

That's basically how floats work. If you want the described behaviour you can do something else instead, for instance white-space: nowrap; on the container and display: inline-block; instead of float.

http://jsfiddle.net/NPzsV/3/

.container {
    white-space: nowrap;
}
.line {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    white-space: normal;
}

One thing to note though: with this approach, newlines/spaces/tabs between the divs will cause a space between them in the rendering.

Answer 2

Use display: inline-block instead of float: left on the divs, and add the property white-space: nowrap to their parent container.

Demo: http://jsbin.com/akiniv/1/edit

Demo with your fiddle ;) http://jsfiddle.net/NPzsV/4/