Give the parent div the width of its floating content

Question

I want to create an external div wide enough to contain all of its children (which float on the left).

This is a basic diagram of what I want to achieve (in pure CSS). I tried a lot, but it doesn't seem to strangle this concept. Elements always begin to wrap in the browser view.

   +--viewport-------------------+
   |                             |
   | +----parent div--------------------------------------------------------^
   | |                           |                                          |
   | | +-------+ +-------+ +--------+ +---------+ +--------+ +-----+        |
   | | |       | |       | |     |  | |         | |        | |     |        |
   | | |       | |       | |     |  | |         | |        | |     |        |
   | | |       | |       | |     |  | |         | |        | |     |        |
   | | +-------+ +-------+ +--------+ +---------+ +--------+ +-----+        |
   | +----------------------------------------------------------------------+
   |                             |
   |                             |
   +-----------------------------+

Can anyone help me with this?

Answer 1

Add white-space: nowrapto the parent div, and for children add display: inline-blockinstead float: left, for example:

.parent_div {
    white-space: nowrap;
}
.parent_div > div {
    display: inline-block;
}

Here is an example: FIDDLE