Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
Vimos como podíamos hacer tres columnas en CSS y vimos también una pequeña pega con ese diseño. El pie se quedaba montado sobre las columnas laterales si estas eran más largas que la central.
Vamos a ahora a ver otra posible forma de recolocar los div, para que queden de la misma forma, pero evitando esa pequeña pega. Para ello usaremos float:left y float:right.
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.
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.
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. Aquí puedes ver este efecto.
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;
}
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.
Puedes ver el resultado de todo esto y también el CSS.
Gracias a Mikmoro, que si no me ayuda, no soy capaz de sacar yo solo este diseño.