Creo en nosotros. Wikipedia.
TreeWeb::Artículos::HTML y CSS::Plantilla de tres columnas
Permalink: http://www.treeweb.es/u/451/ 09/11/2010

Plantilla de tres columnas

Descripción

Una sencilla plantilla de ancho fijo de tres columnas, con una cabecera y un pie. Esta plantilla de ejemplo explica los float, los márgenes y los overflow que utiliza y se puede tomar como base para desarrollar otras plantillas más elaboradas. Las características principales de esta plantilla son:
  • Ancho fijo.
  • Tres columnas + cabecera + pie.
  • Ajuste del cuerpo (y la alineación del pie) a la columna más alta (mediante los overflows)
  • Se visualiza correctamente en todos los navegadores.
  • El ancho de cada columna es fijo e independiente.

Ejemplo

Se puede ver el ejemplo en el siguiente enlace http://www.treeweb.es/ShareCode/preview/d120fe1e7abfa824c77dae2386d86e91

Codigo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Plantilla de tres columnas de ejemplo</title> <style type="text/css"> BODY { margin:0; font-size:80%; } .marco { width:1000px; margin:10px auto 10px auto; /* Centrado horizontal */ } .cabecera { border:solid orange 1px; padding:10px; } .cuerpo { padding:10px 0 10px 0; overflow-x:hidden; overflow-y:auto; /* Hace que se ajuste a la columna más alta en ff */ height:100%; /* Hace que se ajuste a la columna más alta en ie6 */ } .columna_derecha { float:right; /* Alineación a la derecha */ width:270px; border:solid lightblue 1px; padding:10px; } .columna_izquierda { float:left; /* Alineación a la izquierda */ width:170px; border:solid lightblue 1px; padding:10px; } .columna_central { margin-left:200px; /* Espacio para la columna izquierda */ margin-right:300px; /* Espacio para la columna derecha */ border:solid navy 1px; padding:10px; } .pie { border:solid orange 1px; padding:10px; text-align:center; font-size:80%; } </style> </head> <body> <div class="marco"> <div class="cabecera"> <h1>Cabecera</h1> </div> <div class="cuerpo"> <div class="columna_derecha"> <h2>Derecha</h2> Esta es la columna derecha, tiene un float right y entre el ancho (270px), relleno (10px+10px) y bordes(1px + 1px) tiene 292px; </div> <div class="columna_izquierda"> <h2>Izquierda</h2> Esta es la columna izquierda, tiene un float right y entre el ancho (170px), relleno (10px+10px) y bordes(1px + 1px) tiene 192px; </div> <div class="columna_central"> <h2>Centro</h2> La columna central se ajusta al máximo espacio posible (en este caso los 1000px que tiene el 'marco') dejando márgenes laterales a izquierda (200px) y derecha (300px) para las columnas.<br> Además el cuerpo se ajusta a la columna más larga de forma automática. </div> </div> <div class="pie"> Este es el pie de la plantilla. </div> </div> </body> </html>