How do I set this div to be the minimum possible width to display its floating contents?

Question

Problem

I have \"boxes\" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn\'t shrink

Answer 1

I have done little bit changes in your css, check the jsFiddle link here if it works for you.

Followings are the css chagnes:

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
    padding:2px;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 0 2px 2px 0;
}