How to shrink wrap floating content?

Question

I have a problem concerning shrink wrapping a container div, if the content is floating.

I want the container to be only as wide as the floating content of the container (shrink-wrapped). The container should be centered. Because of the context I cannot give the container an absolute width.

HTML

<div class="container">
    <div class="content">Some content</div>
    <div class="content">Some content</div>
    <div class="content">Some content</div>
</div>

CSS

.content {
   width: 50px;
   float: left;
   background-color: #CCC;
   margin: 10px 10px 0 0;
   overflow:hidden;
}


.container:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.container {
    border: 1px solid #FF0000;
    display:table;
    margin: 0 auto;
}

Please see the problem under https://jsfiddle.net/jackis/05nzo4oc/12/ . As soon as the floating content has to break the line the container takes the whole available width, even if a good part of the container remains empty to the right then. If the content does not break the line it works as expected. To see that, change the width of the .content class to 50px:

.content { width: 50px; ...}

I have absolutely no idea how to shrink wrap the container div if the floating content has to break the line.

Edit:

The container should contain as much content divs as possible in one line, but should leave no "phantom space" to the right, if the next content div uses the next line. For the real world problem I am trying to demonstrate with this model the width of the content divs is fixed.

Thanks for your help

Answer 1

To get a container block to expand to fit it's children you need to set it to inline-block. This also gives the possibility to center it using text-align center on a parent element.

.content {
width: 270px;
display:block;
float: left;
background-color: #CCC;
margin: 0;
overflow:hidden;
}

.content:nth-child(odd){
  margin-right: 20px;
}

.container {
  padding: 0;
  border: 1px solid #FF0000;
  display: inline-block;
  margin: 0;
  max-width: 560px;
}

.outer-wrap {
  text-align: center
}

I have forked and tidied up your fiddle here:

http://jsfiddle.net/simoncmason/qL611mu6/

I take it this is what you wanted to achieve.

(Edited following comments)

Answer 2

I've managed to get it right with the width 270px and other versions, but i feel it to be a hack:

.container {
    padding: 0 auto;
    border: 1px solid #FF0000;
    display:table-caption;
    margin-left:-50%;
    margin-right:50%;

}

A complete version is here .

Answer 3

I solved my problem based on knowledge I have about the context of the environment the composition is used. As the container takes the whole width of the screen and I know how wide a content tile is, I know how many can fit in one line. I can then work with media queries and set the width of the container explicitely to get the desired behavior:

`@media all and (min-width: 280px) and (max-width:559px) {
    div.product-grid {
        width:280px;
    }
 }

@media all and (min-width: 560px) and (max-width:839px) {
    div.product-grid {
        width:560px;
    }
 }

`

The container will then be centered. on the screen. Of course I can not foresee all possible screen widths, but for huge resolutions, I can just live with a container not being centered.