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

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