Aqui está um exemplo

http://jsfiddle.net/BringMeAnother/LwXhE/

// html
<div class="container clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

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

O recipiente com o fundo vermelho parece sempre se estender até 100%. O que eu gostaria de fazer é tornar sua largura dependente dos filhos flutuantes, então neste caso, 3 vezes 100px.

A razão pela qual eu gostaria de ter isso é a seguinte. Em um layout flexível, eu tenho um contêiner que contém vários elementos filho de tamanhos diferentes. A largura e a quantidade dessas crianças podem variar. As crianças sempre flutuam. O objetivo é ter os filhos flutuantes centrados. Então, se eu sempre tiver um elemento filho, eu simplesmente definiria sua margem-direita e margem-esquerda como automática. No entanto, há várias crianças que desejo colocar uma ao lado da outra, mas depois que elas foram ordenadas horizontalmente, gostaria que essa linha fosse centralizada na página. Eu não posso dar uma largura fixa para o contêiner, pois a quantidade de crianças e cada uma de suas larguras não são determinadas com antecedência.

Eu acho que eu poderia fazer isso com javascript, mas gostaria de saber se existe uma solução css pura. obrigado