¿Cómo hago un div automáticamente lo suficientemente amplio para acomodar a sus hijos flotantes?

Question

¿Cómo hago un div automáticamente lo suficientemente amplio como para dar cabida a sus niños flotantes?

<div class="Parent"> <!-- 3 Children, should be 450px wide--> 
    <div class="Child"></div> 
    <div class="Child"></div> 
    <div class="Child"></div> 
</div> 
<div class="Parent"> <!-- 2 children, should be 300px wide--> 
    <div class="Child"></div> 
    <div class="Child"></div> 
</div> 

Las divs Child son todas "float: left" con anchos fijos. ¿Cómo hago que Parent div sea igual al ancho de sus hijos flotantes? El número de hijos en cada padre varía y se desconoce, pero los niños deben alinearse en una fila, sin envolver a una nueva línea.

Ejemplo: Si los tres hijos son 150px, el padre debe convertirse en 450px para que ninguno de los hijos se envuelva. Si hay dos hijos de 150 px, el padre debe convertirse en 300 px.

ACTUALIZACIÓN:

"violín" está muy bien. Aquí hay una demostración del problema: http://jsfiddle.net/AG3c9/6/

Al pasar el mouse sobre los animales, puede ver que las aves, los reptiles y los peces se apilan uno encima del otro. Deben mostrar uno al lado del otro.

Esto es lo que quiero que se vea como: http://jsfiddle.net/AG3c9/8/

lo tengo al obligar a los padres a ser un ancho fijo. Pero el padre debe variar según sus hijos y no tener un ancho fijo.

Answer 1

flotar el .Parentdiv s:

Live Demo

mi prueba de CSS:

.Parent { 
    float: left; 
    background: #ccc; 

    margin: 0 0 16px 0; 
    clear: both 
} 
.Child { 
    float: left; 
    width: 150px; 
    height: 50px; 
} 

---

Esto es lo que sucede cuando no float: left el div padre:

http://jsfiddle.net/thirtydot/AG3c9/1/