Divs flotantes centrados múltiples en un diseño líquido
Tengo una idea para un diseño que me gustaría usar, pero no puedo hacer que funcione correctamente. Espero que alguien aquí pueda ayudarme, ya que he pasado horas buscando.
El diseño es así.
Una envoltura div alberga 6 divisiones de niño. Esos niños divs deben estar centrados enTODAS veces, independientemente del tamaño del contenedor div.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
El problema es cuando el tamaño del navegador es más pequeño y se toca un cuadro en la línea debajo de los cuadros que se iluminarán a la izquierda, mientras que quiero que estén siempre centrados. ¿Es esto posible usando CSS puro o necesito usar un poco de jquery?