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

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