How to make a horizontal scroll for left-floating children?

I have a container wrapper div that I want to stretch the width of it’s parent, so I set it to 100% width. I want to have children divs in it that if they are wider than the wrapper, it will just add a horizontal scroll. You can check out my fiddle here to see my problem. I don’t want the 4th element to be on a new line, but rather outside of the borders of the wrapper div and have it create a horizontal scroll. Any help?


The best approach would be setting the elements to inline-block, and then using white-space: nowrap to prevent them from breaking to a new line. Aside from that, you were missing a semi-colon after overflow-x:scroll.

jsFiddle example

.element {
  white-space: nowrap;

If you absolutely have to use floating element, you would essentially have to wrap the elements with another element, which has a larger width.