4 sencillas maneras de alinear divs horizontalmente

David Galisteo Cantero

En esta entrada vamos a ver distintas maneras para alinear divs horizontalmente, para ello, usaremos las propiedades ‘float’ , ‘display’ y ‘position’ de css.

Es muy probable que haya muchas más maneras, es cuestión de imaginación, pero en este post he recogido las que me han parecido más sencillas.

Puedes acceder a los ejemplos aquí

Recomiendo que vayas echando un ojo a los ejemplos mientras se va explicando cada manera.

Para cada ejemplo, tenemos un div contenedor con un id y dos divs hijos con clases ‘A’ y ‘B’, tal que así:

div id="contenedor">
  div class="A">div A /div>
  div class="B">div B /div>
/div>

Para comenzar, vamos a empezar especificando las propiedades comunes para todos nuestros divs:

div{
	width: 200px;
	padding: 25px 0;
	margin: 0;
}

float

La propiedad float de CSS especifica cómo flotar un elemento, en el primer caso del ejemplo, ambos divs están flotando a la izquierda, pero quizás tengamos el problema de que ‘se desajuste’ el tamaño del div contenedor, así que le ponemos un ‘overflow:hidden’ para obligar al contenedor a recalcular la altura total.

#flotante{  /*padre*/
	overflow: hidden;
	width: 100%; 
}
#flotante .A, #flotante .B{  /*hijos*/
	float: left;
}

Deberíamos tener el tamaño del padre definido.

display

Con la propiedad display tenemos 2 posibilidades:

display:inline-block

Esta propiedad es la que se suele usar para alinear los elementos ‘li’ de las listas, normalmente en un menú.
Por defecto, los elementos ‘cajas’ tienen display:block, divs, párrafos… , para conseguir un alineamiento horizontal, veamos el siguiente código:

#bloque{  /*padre*/
	width: 100%;
}
#bloque .A, #bloque .B{  /*hijos*/
	display: inline-block;
}

Simplemente con especificar la propiedad ‘display:inline-block’ en los hijos, tendríamos suficiente.

display:table-cell

Este valor de la propiedad ‘display’ vendría a simular la alineación de una tabla:

#tabla{  /*padre*/
	width: 100%;
}
#tabla .A, #tabla .B{  /*hijos*/
	display: table-cell;
}

Bastante sencillo, ¿no?

position

Por último, quizás este método sea algo más enrevesado, pero siempre viene bien cuando, por algún motivo, no nos son útiles los métodos anteriores.

Para saber más sobre la propiedad position, sigue a explicación de position.

#posicion{  /*padre*/
	position: relative;
	padding: 0;
}
#posicion .B{  /*hijos*/
	position: absolute;
	left: 200px;
	top: 0;
}

si no entiendes demasiado bien este último caso, echa un ojo al enlace anterior.

Ejemplos

Espero que haya sido útil.

HackSaludos!

Publicado el 26-01-2014

Compartelo!

4 comentarios

Deja un comentario

Comentanos

*
Ir arriba de la pagina