Desarrollo de Aplicaciones Web.   
Tres columnas con float en CSS

DAWeb

Tres columnas con float en CSS

float y clear

Una posible forma de colocar elementos con CSS es usar float. Si usamos, por ejemplo, float:left, el bloque se quedará pegado a la izquierda. El siguiente bloque no irá debajo, sino que seguirá a la misma altura y a la derecha de él. Si usamos varios bloques seguidos con float left, se iran "amontonando" en el lado izquierdo, en una fila horizontal. En el siguiente parrafo, por ejemplo, he puesto dos cajas con float:left seguidas y luego el parrafo

Este párrafo no tiene float:left, sino que es un párrafo normal. Sale a la derecha de los dos bloques float:left.

Podemos aprovechar esta característica de float:left para hacer columnas. También vale float:right, que lo pega al lado derecho.

Nuestras columnas

Aprovechando estas características, haremos nuestra columna izquierda y derecha, de esta forma:

#columna_izquierda
 {
    float:left;
    width:100px;
 }
 #columna_derecha
 {
    width:100px;
    float:right;
 }

Para que las columnas queden en la parte superior, justo debajo de la cabecera, es importante que en el código html pongamos primero los dos div de columna_izquierda y columna_derecha. Si ponemos otra cosa delante, estas columnas se pegarán respectivamente a izquierda y derecha, pero a la altura vertical que les toque, es decir, debajo de lo que pongamos delante. En nuestro caso, quedan debajo de la cabecera.

También es importante darles un ancho. Si no fijamos el ancho, ocuparán el 100% y saldrá las columnas y el texto uno debajo de otro, como si no hubieramos hecho nada.

La columna central

Para la columna central no necesitamos nada especial salvo un detalle. Si no hacemos nada, la columna central empezará a escribirse entre las dos columnas laterales. Pero cuando se terminen estas, el texto empezará a escribirse por debajo de las columnas.

Para evitarlo debemos hacer una cosa muy simple, darle márgenes de al menos el mismo ancho que las columnas laterales. De esta forma, el texto no se irá ni a la izquierda ni a la derecha cuando se terminen las columnas laterales.

#columna_central
 {
    margin-left:120px;
    margin-right:120px;
 }

El pie

Para el pie usaremos otra característica especial. Al ir detrás de la columna central y seguir esta el posicionamiento normal dentro de la página, el pie siempre irá debajo de la columna central, por ahí no tenemos problemas.

Las columnas laterales, al ir con float, se han salido del flujo normal de posicionamiento. Si son más largas que la columna central, el pie quedará montado sobre ellas.

Para evitar esto, podemos usar clear:left, clear:right o clear:both. Esto hace que el pie se desplace hacia abajo hasta que no haya ningún elemento en el lado izquierdo, en el derecho o en ninguno de ellos.

Como tenemos una columna con float:left y otra con float:right, debemos usar clear:both en el pie. De esta forma se ira hacia abajo, hasta encontrar un hueco del 100% para él.

El resultado final usa el siguiente código css:

div
{
	border:1px solid black;
}
#cabecera
{
}
#columna_izquierda
{
	margin-top:10px;
	float:left;
	width:100px;
}
#columna_derecha
{
	margin-top:10px;
	width:100px;
	float:right;
}
#columna_central
{
	margin:10px;
	margin-left:120px;
	margin-right:120px;
}
#pie
{
clear:both;

y para un ejemplo de prueba, acceder al código del enlace de prueba:

Buscar en mis sitios

Google Plus asignatura DAWeb

Google Plus asignatura IAT II