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

your container will wrap if there's a clear 'break to next line'.

Here is a pen to see different test, just set via CSS how many per line.

3.2.1 is that what you want ?

http://codepen.io/gcyrillus/pen/gHwjz

.container {
    background: #fcc;
    margin: 0 auto;
    max-width:300px;
    }
.container.table {
  display:table;
}
.boxes {
    background: #cfc;
    display:inline-block ;/* or float */
    vertical-align:top;
}
.box {
    border: 1px dashed blue ;
    width: 70px;
    height: 50px;
    float:left;
    margin: 2px;
}

/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
  display:inline-block;
}
.container.table {
  display:table;
}
.container.float {
 float:right
}
section {
  width:450px; 
  margin:auto;
  padding:0.5em 1.5em;
  background:#ffffd;
  overflow:hidden;
}
.container:before { /* see classes */
  content:attr(class);
  display:block;
  position:absolute;
  margin-top:-1.2em;
}

/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}

Answer 2

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;
}

Answer 3

Working DEMO http://jsfiddle.net/RLRh6/56/

If you want to achieve this only with html, css, should use media queries.

CSS

.container {
    margin: 0 auto;
    min-width: 76px;
    max-width: 228px;
}
@media only screen and (min-width: 76px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 76px;
  }
}
@media only screen and (min-width: 152px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 152px;
  }
}
@media only screen and (min-width: 228px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 228px;
  }
}
.boxes {
    float:left;
    background: #cfc;
}

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

Answer 4

Remove the min-width from the .container and add display:inline-block;

also if you want to center the .container then wrap the .container with a div and apply text-align:center to it.

.container {
    background: #fcc;
    margin: 0 auto;
   display:inline-block;
}

jsFiddle Link