Question

How to create set of float:right divs one next to another and make them not wrap, no matter how much of them exists or how wide is any of them. If they together are wider than viewport, then x-scroll should appear.

Content inside those divs should wrap normally.

CSS only would be good.

Answer 1

Style the parent element with white-space: nowrap;, though this only works with display: inline (or display: inline-block;) elements. Given the following HTML:

<div id="parent">
    <div class="child"></div>
    <!-- there's quite a lot of these... -->
    <div class="child"></div>
</div>

And the CSS:

#parent {
    white-space: nowrap;
}

#parent .child {
    display: inline-block;
    /* there's some other CSS for aesthetics */
}

JS Fiddle demo.

Unfortunately I don’t think there is a way of forcing float-ed elements to not wrap to a new line.

To preserve or, rather, force normal line-wrapping for descendant elements you’ll have to explicitly over-ride the inheritance and set white-space: normal (as well as, possibly, define a width or max-width)

/* other CSS remains intact */

#parent .child {
    display: inline-block;
    /* irrelevant/aesthetic CSS */
    white-space: normal;
    max-width: 8em;
}

JS Fiddle demo.