Hier ist ein Beispiel

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

Der Behälter mit dem roten Hintergrund scheint sich immer zu 100% zu dehnen. Was ich tun möchte, ist, seine Breite von den schwebenden Kindern abhängig zu machen, also in diesem Fall 3 mal 100px.

Der Grund, warum ich das haben möchte, ist wie folgt. In einem flexiblen Layout habe ich einen Container, der mehrere untergeordnete Elemente unterschiedlicher Größe enthält. Die Größe und Anzahl dieser Kinder kann variieren. Die Kinder schweben immer. Das Ziel ist es, die schwimmenden Kinder im Mittelpunkt zu haben. Wenn ich also immer ein untergeordnetes Element habe, setze ich einfach den rechten und linken Rand auf auto. Es gibt jedoch mehrere Kinder, die ich nebeneinander stellen möchte, aber nachdem sie horizontal angeordnet wurden, möchte ich, dass diese Zeile auf der Seite zentriert wird. Ich kann dem Container keine feste Breite geben, da die Anzahl der Kinder und deren Breite nicht im Voraus festgelegt wurden.

Ich denke, ich könnte dies mit Javascript tun, aber ich frage mich, ob es eine reine CSS-Lösung gibt. Vielen Dank