How to stop divs from wrapping?

Question

I have defined a div with the CSS:

height: 100%;
width: 360px;
float: left.

Now, I have a button that dynamically adds these divs to the body. The problem is that when there are too many to fit the browser window, they wrap the next div is placed below the others like this.

|bar|  |bar|  |bar|
|bar|  |bar|
|<---- Page width ---->|

Now, what I want is for it to keep on going to the right like this:

|bar|  |bar|  |bar|  |bar|  |bar|
|<---- Page width ---->|

And of course, there will be a scrollbar. Is this possible without defining this?

body {
    width: XXXpx;
}

Answer 1

Instead of using float: left;, you can use display: inline-block; and wrap in a container using white-space: nowrap;.

http://jsfiddle.net/Jeff_Meadows/JJ5kT/