title: Having the floating children elements determine parent width
body: <p>Here is an example</p>
  
  <p><a href="http://jsfiddle.net/BringMeAnother/LwXhE/" rel="nofollow">http://jsfiddle.net/BringMeAnother/LwXhE/</a></p>
  
  <pre><code>// html
  &lt;div class="container clearfix"&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  // css
  .container {
      background: red;
      padding: 10px;
  }
  .child {
      width: 100px;
      height: 100px;
      float: left;
  }
  .child:nth-child(even) {
      background: green;
  }
  .child:nth-child(odd) {
      background: blue;
  }
  
  .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  </code></pre>
  
  <p>The container with the red background seem to always stretch to 100%. What I'd like to do is to make its width depend on the floating children, so in this case, 3 times 100px.</p>
  
  <p>The reason I'd like to have this is as follow. In a flexible layout, I have a container that contains several child elements of different sizes. The width and amount of those children can vary. The children always float. The goal is to have the floating children centered. So, if I always have one child element, I'd simply set its margin-right and margin-left to auto. However, there are several children which I wish to put next to each other, but after they have been ordered horizontally, I'd like that row to be centered on the page. I cannot give a fixed width to the container since the amount of children and each of their width are not determined in advance.</p>
  
  <p>I think I might be able to do this with javascript, but I wonder if there is a pure css solution. Thanks</p>