CODEWITHSUNDEEP
htmlcss
Tim Broddin
Tim Broddin

Reputation: 53

Give parent div the width of it's floated contents

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?

Upvotes: 4

Views: 67

Answers (1)

matewka
matewka

Reputation: 10148

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

Upvotes: 4

Related Questions