Hola gente....me estoy volviendo loco...
Lo que quiero es una fila de 4 divs que contendran algo (puede ser imagenes con links hacia algun lado), es decir que haciendo flotar los divs a la izquierda y repitiendo debajo tantas filas como sea necesario, tendria 4 columnas y n filas de estos divs. A los mismos les pongo un margen todo alrededor para separarlos entre si.
La idea es que estos 4 divs se vean perfectamente en el ancho de una pantalla ancha de 1920x1080, y por supuesto los quiero centrados en la pantalla (es decir en el body, el cual tiene un width de 100%), y al mismo tiempo la pagina se adapte a cualquier resolucion de pantalla inferior, mostrando 3 columnas de divs cuando no entren los 4, pero sigan aun viendose centrados (por supuesto) y llegado el caso si la pantalla sigue achicandose se veran 2 o 1, pero siempre centrados en el ancho total de la pantalla.
Ahora bien este seria my html:
<html>
<head>
<title>Documento sin título</title>
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
</body>
</html>
Y este seria el css:
* {
margin:0px;
padding:0px;
}
body {
width:100%;
text-align:center;
}
.caja {
width:410px;
height:350px;
margin:15px;
text-align:left;
border:#333 solid 1px;
border-radius:10px;
position:relative;
float:left;
}
No aparecen centrados, y no puedo encontrar cual es la forma de hacerlo. Lo de envolver todo en un wrapper tampoco me sirvio, ya que al darle un ancho fijo al wrapper, cuando se achica la pantalla y ya no se ven los 4 sino 3, o 2 o 1 ya dejan de estar centrados.
Se agradece mucho cualquier ayuda.