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
Ahora que ya sabemos las ideas básicas de cómo poner los bloques de texto en CSS, vamos con un ejemplo concreto. Suele ser habitual querer hacer una página con un texto/imágen de cabecera, tres columnas de texto y un pie. Las columnas izquierda y derecha se suelen usar para enlaces, anuncios y otras cosas. Estas dos columnas suelen ser de un ancho fijo. La columna central suele ser la que tiene el contenido y se ensancha lo que haga falta para ocupar todo el hueco entre las columnas izquierda y central.
Vaya, más o menos la disposición en tres columnas que puedes ver en el enlace. Juega con el tamaño del navegador para ver cómo se modifica el tamaño de la columna central. He puesto un borde a cada bloque para que se vea mejor.
Según comentamos en el tutorial de cómo organizar los bloques html para CSS, lo primero es definir tantos bloques como elementos principales hay en nuestra página. Para la del ejemplo, puede ser así
<div id="cabecera">... </div>
<div id="columna_izquierda">...</div>
<div id="columna_derecha">...</div>
<div id="columna_central">...</div>
<div id="pie">...</div>
Si rellenamos el texto de estos bloques y visualizamos la página tal cual, sin hoja de estilo, nos puede quedar todo seguido.
Vamos ahora a ir fijando las posiciones para cada bloque.
La cabecera no necesita nada especial. La hemos puesto la primera y un bloque <div> ocupa en ancho el cien por cien de la página. Los demás bloques irán debajo.
Las columnas izquierda y derecha necesitamos situarlas. Les ponemos posicion absoluta para fijar exactamente dónde las queremos y les damos un ancho.
A las columnas necesitamos dejarles un hueco por arriba para la cabecera, por eso lo de top. El motivo es que hemos puesto position:absolute, con lo que los <div> de las columnas se salen del flujo normal de situación de elementos y NO saldrán ellas solas debajo de la cabecera, sino montada en ella.
Con esto tenemos colocada la cabecera y las dos columnas. Si pinchas el enlace puedes ver cómo queda. La columna central sale montada sobre las columnas. Al tener estas position:absolute, se salen del flujo normal de bloques y la columna central se pega a la cabecera.
Para la columna central sería muy bonito poner posiciones absolutas y fijar la parte izquierda, superior y derecha. Pero ya sabemos que las cosas fáciles no están de moda. Como comenté anteriormente en otro tutorial, a Internet Explorer no le gusta que le fijen simultáneamente el left y el right de un <div> y no hace caso del último. Debemos buscar otra forma de hacerlo.
Puesto que las columnas se han salido del flujo normal por la posición absoluta, el <div> con el contenido principal ocupa por defecto el 100% del ancho y va a salir montado sobre las columnas. Afortunadamente la solución también es fácil. Basta con poner un margin a la izquierda y derecha en la columna central, de forma que se deje hueco suficiente para las columnas laterales. En concreto, como las columnas laterales tienen 100 pixels de ancho y están separadas 10 pixels del borde del navegador, son 110 pixels. Si dejamos otros 10 de márgen entre la columna y el contenido central, nos quedan 120 pixels.
El pie no necesita nada especial. Ocupa él solo el 100% del ancho del navegador, puesto que no le hemos dicho nada. Y se pondrá el sólo debajo de la columna central.
Listo, puedes ver cómo quedan nuestra página con tres columnas y el CSS que he utilizado para ello.
Esta forma de hacer las columnas es bastante sencilla, pero tiene una pega. Hemos dicho que el pie se pone él sólo debajo de la columna central. Todo estupendo y maravilloso si la columna central es más larga que las laterales.
Si la columna lateral, cualquiera de ellas, es más larga que la columna central, el pie seguirá pegándose a la columna central, por lo que saldrá montado sobre la columna lateral.
Una solución es poner también margin izquiedo y derecho al pie. Esto hará que el pie se "cuele" entre las columnas laterales siguiendo a la central. Pero si queremos que el pie ocupe todo el ancho, podemo hacerlo utilizando los float y clear de CSS.