How to make children float inside side-by-side elements, in a fixed with container?
<p>I have the situation:</p>

<p><strong>html:</strong></p>

<pre><code>&lt;div class="container0"&gt;
  &lt;div class="item"&gt;
    &lt;div class="subitens"&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;
  &lt;/div&gt;
  &lt;div class="item"&gt;
    &lt;div class="subitens"&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 class="child"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;div&gt;
&lt;div&gt;
</code></pre>

<p><strong>css:</strong></p>

<pre><code>.container0 {
  width:600px; /*needed*/
}

.item {
  border: solid;
  background: yellow;
  float: left;
  position: relative;
  width: auto; /*needed, should be width of the contents*/
}

.subitens {
    background: red;
    padding: 10px;
}
.child {
    background: blue;
    border: solid;
    width: 100px; /*needed*/
    height: 100px; /*needed*/
    float: left;
}
</code></pre>

<p><a href="http://jsfiddle.net/tombrito/gx7kL330/6/" rel="nofollow">http://jsfiddle.net/tombrito/gx7kL330/6/</a></p>

<p>And I would like the <code>.item</code> elements to be side by side, while the <code>.child</code> elements would float to fit in the space (600px). Any idea?</p>