Cómo alinear tres bloques con CSS
He aquí un pequeño tip que puede simplicarles la vida 
. Los siguientes tres bloques de color se encuentran alineados horizontalmente:
El código HTML correspondiente es:
<div id=”bloque”>
<div id=”caja1″></div>
<div id=”caja2″></div>
<div id=”caja3″></div>
</div>
<div class=”salto”></div>
Y el CSS es:
#bloque {width: 100%;
margin: 0 auto;
}
#caja1, #caja2, #caja3 {width: 30%;
margin-left: 2px;
float: left;
height: 100px;
}
#caja1 {background-color: #34A7D6;
margin-left: 2px!important;
margin-left: 1px;
}
#caja2 {background-color: #0083F6;}
#caja3 {background-color: #43C4F4;}
.salto {clear: both;}
Si ponemos “background-color: #fff” (blanco) y quitamos “height: 100px;” (altura), podemos colocar cualquier elemento (texto, imagen, otro bloque, etc.) dentro de las cajas. El resultado es alinear cualquier combinación de elementos horizontalmente. La separación entre cajas se puede cambiar en “margin-left: 2px;” (margen izquierda = distancia entre un elemento y otro). Para la caja de la izquierda, se utiliza la palabra clave “!important” que sirve para dar prioridad a una definición si se encuentra repetida. También sirve como pequeño hack, haciendo que el navegador IE6 (que no soporta “!important“) pueda tomar una distancia un poco menor para el margen izquierdo.
Si escribimos el siguiente código HTML:
<div id=”bloque”>
<div id=”caja1″>Soy blogueeeero Soy blogueeeero Soy blogueeeero Soy blogueeeero Soy blogueeeero Soy blogueeeero</div>
<div id=”caja2″><img src=”http://farm4.static.flickr.com/3009/3062784957_341a473b88_s.jpg” alt=”Imagen careta HDES” /></div>
<div id=”caja3″>En un lugar de la mancha de cuyo nombre no quiero acordarme</div>
</div>
<div class=”salto”></div>
Con el siguiente CSS:
#bloque {width: 100%;
margin: 0 auto;
}
#caja1, #caja2, #caja3 {width: 30%;
margin-left: 2px;
float: left;
}
#caja1 {background-color: #fff;
margin-left: 2px!important;
margin-left: 1px;
}
#caja2 {background-color: #fff;}
#caja3 {background-color: #fff;}
.salto {clear: both;}
El resultado será el siguiente (se ha añadido la definición “border: 1px solid #960205;” en todas las cajas para resaltar la situación de los elementos dentro de las cajas y el tamaño de éstas):
Posts relacionados
Tags: trucos
agosto 6th, 2010 a las 1:26 am
Excelente tip, me sacaste de un apuro!!!
noviembre 5th, 2010 a las 3:41 pm
¡Gracias! Estaba rompiendome la cabeza con el CSS…