¿Cómo se alinean los divs flotantes donde el contenedor principal no tiene un ancho?

Question

Sé que se han formulado preguntas similares anteriormente, pero no he visto ninguna en la que el div principal tenga un ancho desconocido con una respuesta definitiva.

Así que aquí está la situación.

<style> 
.parent { 
    width: 100%; 
} 

.child { 
    width: 300px; 
    float: left; 
} 

</style> 

<div class="parent> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    ... 
    <div class="child></div> 
<div> 

Básicamente, quiero colocar tantos elementos de seguridad para niños en el contenedor primario como la resolución de pantalla del usuario puede admitir.

No quiero utilizar consultas de medios css3 porque quiero admitir IE7.

Intenté usar javascript para especificar un ancho para el elemento primario, pero no es ideal ya que el contenido salta al centro después de que se carga. ¿Algunas ideas?

Answer 1

Esta es la solución más cercana sin el uso de javascript. Es display:inline-block; que hace que divs lado lateral de la barra y que esté en el centro al mismo tiempo. Intenté convertir .parent en display:table-cell; pero no funcionó. Por lo tanto, es necesario utilizar el <table> real para el poderoso comportamiento de centrado.

http://jsfiddle.net/Dgdhr/

Editado: http://jsfiddle.net/Dgdhr/1 (sin tabla: gracias a MartinodF)

<table width="100%"> 
<tr> 
<td align="center"> 
      <div class="child">1</div> 
      <div class="child">2</div> 
      <div class="child">3</div> 
      <div class="child">4</div> 
      <div class="child">5</div> 
      <div class="child">6</div> 
</td> 
</tr> 
</table> 

.child { 
    width: 100px; 
    height:100px; 
    margin:10px; 
    display:inline-block; 
    background:#e0e0e0; 
}