Give parent div the width of it's floated contents

css, html

Solution

Add `white-space: nowrap` to the parent div and for the children add `display: inline-block` instead of `float: left`, e.g.:

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

Here's an example: FIDDLE

Problem

I want to create an outer div that's wide enough to contain all it's children (which are floated left). This is a basic diagram of what I want to achieve (in pure CSS). I've tried a lot, but can't seem to gasp this concept. The items always start wrapping at the browser viewport. ``` +--viewport-------------------+ | | | +----parent div--------------------------------------------------------^ | | | | | | +-------+ +-------+ +--------+ +---------+ +--------+ +-----+ | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +-------+ +-------+ +--------+ +---------+ +--------+ +-----+ | | +----------------------------------------------------------------------+ | | | | +-----------------------------+ ``` Can anybody help me with this?

Original source