maquetando con css
-El ancho de cada caja, naturalmente, es determinado por la division : “100/nº de cajas=X” y a X se le restara el valor que queramos que haya de margen entre caja y caja:
——————————————————————————–
% ANCHO = ((100/nº de cajas) – (% MARGEN))
——————————————————————————–
Con left alineas la caja donde quieras ponerla, la 1ª a la izquierda del todo, y la 2ª left tiene el valor del ancho de la 1ª caja + el margen que quieres que haya (en este caso 1% de margen), y asi sucesivamente,
——————————————————————————–
LEFT X= % ANCHO + LEFT (X-1) + % MARGEN
——————————————————————————–
Nota:X-1 representa el valor que left tenia en la caja inmediatamente anterior.
——————————————————————————–
*Ejemplo de maquetacion a 4 Columnas
<style>
——————————————————————————–
#caja1 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:24%;
——————————————————————————–
left:1%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
#caja2 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:24%;
——————————————————————————–
left:26%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
#caja3 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:24%;
——————————————————————————–
left:51%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
#caja4 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:24%;
——————————————————————————–
left:76%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
</style>
——————————————————————————–
</head>
<body>
——————————————————————————–
<div id=”caja1″>Prueba 1</div>
——————————————————————————–
<div id=”caja2″>Prueba 2</div>
——————————————————————————–
<div id=”caja3″>Prueba 3</div>
——————————————————————————–
<div id=”caja4″>Prueba 4</div>
——————————————————————————–
</body>
——————————————————————————–
*Ejemplo de maquetacion a 3 columnas:
<style>
——————————————————————————–
#caja1 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:32%;
——————————————————————————–
left:1%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
#caja2 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:32%;
——————————————————————————–
left:34%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
#caja3 {
——————————————————————————–
position:absolute;
——————————————————————————–
width:32%;
——————————————————————————–
left:68%;
——————————————————————————–
border: solid 1px #999;
——————————————————————————–
}
——————————————————————————–
</style>
——————————————————————————–
</head>
<body>
——————————————————————————–
<div id=”caja1″>Prueba 1</div>
——————————————————————————–
<div id=”caja2″>Prueba 2</div>
——————————————————————————–
<div id=”caja3″>Prueba 3</div>
——————————————————————————–
</body>
fuente