En este articulo vamos a explicar como distribuir horizontalmente varios elementos dentro de un contenedor utilizando CSS.

Suponemos de querer 3 elementos distribuidos horizontalmente dentro de una capa contenedora.

<div id="contenedor">
    <div class="seccion"></div>
    <div class="seccion"></div>
    <div class="seccion"></div>
</div>

Para distribuir los elementos "seccion", dentro de la capa contenedora,
se podría pensar de aplicar un  margin-left a la clase .seccion. 

En este caso pero, tendríamos el problema de la ultima capa a la derecha que no cabría
dentro del contenedor.

La solucion es utilizar el selector CSS :first-child para aplicar un estilo al primer elemento
dentro de la capa contenedora "contenedor".

Primero hay que definir un estilo a la capa contenedora:

#contenedor { width: 640px; height: 300px; }

luego hay que aplicar un estilo a la clase “seccion” de los tres elementos:

.seccion{
    float:left;
    height:300px;
    margin-left:10px;
    width:200px;
}

y entonces podremos sobrescribir el estilo del primer elemento dentro de la capa
contenedora:

Atención: IE6 no soporta este selector.

Social Bookmarking

Esta entrada se publicó , el Jueves, 8 de Octubre de 2009 a las 7:37 horas y está guardada bajo Artículos, Recursos diseño web. Puedes seguir cualquier respuesta a esta entrada mediante el canal RSS 2.0. Puedes dejar un comentario o enviar un trackback desde tu propio sitio.