Es muy frecuente, navegando por Internet, encontrarse con páginas estructuradas en tres columnas. La mayoría de los blogs y de los sistemas de gestión de aprendizajes como moodle utilizan este formato. ¿Cómo podemos hacer algo similar?
En líneas generales, la posibilidad que vamos a explorar a continuación para maquetar una web con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda flotando a la izquierda, la columna de la derecha flotando a la derecha y por último pondremos la parte principal, que aparecerá en el centro de la página.
El código que usaremos es el siguiente:
<p>Un párrafo antes de empezar a tres columnas</p>
<div class="cabecera" style=" background-color:aqua ">
Esta parte es la cabecera y está a una sola columna.
Para que se aprecie bien el efecto, escribiremos
bastante texto aquí.
</div>
<div class="contenedor" style=" background-color:red">
<div class="izquierda"
style="float: left; width:100px;
background-color:yellow ">
Esta es la parte que aparecerá en la columna de la izquierda.
Le hemos puesto un ancho de 100 px, por lo que este texto
aparecerá en varias líneas.
</div>
<div class="derecha"
style="float:right;
width:100px;
background-color:yellow">
Esta es la parte que aparecerá en la columna de la derecha.
Le hemos puesto un ancho de 100 px,
por lo que este texto aparecerá en varias líneas.
</div>
<div class="centro"
style=" background-color:orange;
margin-left: 110px;
margin-right: 110px; ">
Esta es la parte que aparecerá en la columna central.
Ocupará toda la parte central menos los 100 px de la izquierda
y los de la derecha.
Este texto aparecerá en varias líneas.
<br style="clear: both;" />
</div>
</div>
<div class="pie"
style=" background-color:aqua;
clear: both; ">
Esta parte es el pie y volverá a estar a una sola columna.
Para que se aprecie bien el efecto,
escribiremos bastante texto aquí. </div>
<p>Aquí sigue el documento....</p>
Obteniendo el siguiente resultado:
Un párrafo antes de empezar a tres columnas
Aquí sigue el documento....