Aquí hay un ejemplo

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

El contenedor con el fondo rojo parece estirarse siempre al 100%. Lo que me gustaría hacer es hacer que su ancho dependa de los niños flotantes, por lo que en este caso, 3 veces 100px.

La razón por la que me gustaría tener esto es como sigue. En un diseño flexible, tengo un contenedor que contiene varios elementos secundarios de diferentes tamaños. El ancho y la cantidad de esos niños pueden variar. Los niños siempre flotan. El objetivo es tener a los niños flotantes centrados. Entonces, si siempre tengo un elemento hijo, simplemente establecería su margen derecho y margen izquierdo a auto. Sin embargo, hay varios niños que deseo poner uno al lado del otro, pero después de que hayan sido ordenados horizontalmente, me gustaría que esa fila esté centrada en la página. No puedo darle un ancho fijo al contenedor ya que la cantidad de niños y cada uno de sus anchos no se determinan por adelantado.

Creo que podría ser capaz de hacer esto con javascript, pero me pregunto si hay una solución css pura. Gracias