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.