Maquetación CSS (3)

Dos columnas

La presentación a dos columnas es una de las más repetidas, más que típica es ya un tópico. Hay varias maneras de conseguirla, y la más sencilla pasa por definir ambas columnas a porcentaje. Aquí vamos a optar por una disposición algo más arriesgada, consistente en bloquear el tamaño de la columna izquierda. El mayor peligro que se corre es que la derecha quede demasiado estrecha cuando las dimensiones de la ventana sean pequeñas, lo cual se salva utilizando la propiedad min-width.

<div id="Izquierda">... contenido de la caja izquierda... </div>
<div id="Derecha">... contenido de la caja derecha... </div>

div#Izquierda { position:absolute; top:0; left:0; width:200px; height:inherit; }
div#Derecha { margin-left:200px; min-width:350px; }

Ejemplo: Dos columnas.

Tres columnas

Si la anterior es un tópico, ésta es el "Santo Grial", al menos así llaman muchos a la presentación a tres columnas. Incluso el W3C adopta este esquema en su página inicial, pero lo gestionan mediante una tabla (en casa del herrero cuchillo de palo). Aquí lo haremos a nuestra manera, y por supuesto sin tablas. Simplificando al máximo, las cajas laterales van posicionadas en absoluto y su ancho es fijo. Al estar fuera de flujo, el lugar que ocupan dentro del código HTML es lo de menos. Los márgenes de la caja central tienen que coincidir con lo que ocupan las cajas laterales.

Para evitar que los contenidos se superpongan cuando el tamaño de la ventana sea pequeño, se anidan las tres cajas en otra que hace uso de la propiedad min-width. Además del apaño para emular esto mismo en Internet Explorer, también hay que hacer unos retoques mínimos en los márgenes de las cajas centrales, debido a que las cajas tienen borde, y el citado navegador también los interpreta incorrectamente.

<div id="Madre">
 <div id="Izquierda">... contenido de la caja izquierda... </div>
 <div id="Central">... contenido de la caja central... </div>
 <div id="Derecha">... contenido de la caja derecha... </div>
</div>

div#Madre { position:relative; min-width:620px; height:inherit; }
div#Izquierda { position:absolute; top:0; left:0; width:180px; height:100%; }
div#Central { margin-left:179px; margin-right:179px; }
html>body div#Central { margin-left:181px; margin-right:181px; }
div#Derecha { position:absolute; top:0; right:0; width:180px; height:100%; }

Ejemplo: Tres columnas.

Usuarios que han visto este tema también han visto...

- Clases, pseudoclases y pseudoelementos en css
- Redefinición de etiquetas
- Cómo usar fuentes personalizadas mediante CSS
- Hojas de estilo externas
- Crear estilos CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento