Oto przykład

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

Pojemnik z czerwonym tłem wydaje się zawsze rozciągać do 100%. Chciałbym, aby jego szerokość zależała od pływających dzieci, więc w tym przypadku 3 razy 100px.

Powód, dla którego chciałbym to mieć, jest następujący. W elastycznym układzie mam kontener, który zawiera kilka elementów potomnych o różnych rozmiarach. Szerokość i ilość tych dzieci może się różnić. Dzieci zawsze pływają. Celem jest skupienie pływających dzieci. Więc jeśli zawsze mam jeden element podrzędny, po prostu ustawiłbym jego margines prawy i margines lewy na auto. Istnieje jednak kilka dzieci, które chcę umieścić obok siebie, ale po uporządkowaniu w poziomie chciałbym, aby ten wiersz był wyśrodkowany na stronie. Nie mogę podać stałej szerokości kontenera, ponieważ ilość dzieci i ich szerokość nie są z góry określone.

Myślę, że mogę to zrobić za pomocą javascript, ale zastanawiam się, czy istnieje czyste rozwiązanie css. Dzięki