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/__archivo__/TreeWeb/TreeCode/plantilla_de_tres_columnas.html.

Codigo

    0 
    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2 "http://www.w3.org/TR/html4/strict.dtd">
    3 <html>
    4     <head>
    5         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    6         <title>Plantilla de tres columnas de ejemplo</title>
    7         <style type="text/css">
    8             BODY {
    9                 margin:0;
   10                 font-size:80%;
   11             }
   12         
   13             .marco {
   14                 width:1000px;
   15                 margin:10px auto 10px auto; /* Centrado horizontal */
   16             }
   17 
   18             .cabecera {
   19                 border:solid orange 1px;
   20                 padding:10px;
   21             }
   22 
   23             .cuerpo {
   24                 padding:10px 0 10px 0;
   25                 overflow-x:hidden;
   26                 overflow-y:auto; /* Hace que se ajuste a la columna más alta en ff */
   27                 height:100%; /* Hace que se ajuste a la columna más alta  en ie6 */
   28             }
   29 
   30             .columna_derecha {
   31                 float:right; /* Alineación a la derecha */
   32                 width:270px;
   33                 border:solid lightblue 1px;
   34                 padding:10px;
   35             }
   36 
   37             .columna_izquierda {
   38                 float:left; /* Alineación a la izquierda */
   39                 width:170px;
   40                 border:solid lightblue 1px;
   41                 padding:10px;
   42             }
   43 
   44             .columna_central {
   45                 margin-left:200px; /* Espacio para la columna izquierda */
   46                 margin-right:300px; /* Espacio para la columna derecha */
   47                 border:solid navy 1px;
   48                 padding:10px;
   49             }
   50 
   51             .pie {
   52                 border:solid orange 1px;
   53                 padding:10px;
   54                 text-align:center;
   55                 font-size:80%;
   56             }
   57         </style>
   58     </head>
   59     <body>
   60         <div class="marco">
   61             <div class="cabecera">
   62                 <h1>Cabecera</h1>
   63             </div>
   64             <div class="cuerpo">
   65                 <div class="columna_derecha">
   66                     <h2>Derecha</h2>
   67                     Esta es la columna derecha, tiene un float right y entre
   68                     el ancho (270px), relleno (10px+10px) y bordes(1px + 1px)
   69                     tiene 292px;
   70                 </div>
   71                 <div class="columna_izquierda">
   72                     <h2>Izquierda</h2>
   73                     Esta es la columna izquierda, tiene un float right y entre
   74                     el ancho (170px), relleno (10px+10px) y bordes(1px + 1px)
   75                     tiene 192px;
   76                 </div>
   77                 <div class="columna_central">
   78                     <h2>Centro</h2>
   79                     La columna central se ajusta al máximo espacio posible (en
   80                     este caso los 1000px que tiene el 'marco') dejando márgenes
   81                     laterales a izquierda (200px) y derecha (300px) para las
   82                     columnas.<br>
   83                     Además el cuerpo se ajusta a la columna más larga de forma
   84                     automática.
   85                 </div>
   86             </div>
   87             <div class="pie">
   88                 Este es el pie de la plantilla.
   89             </div>
   90         </div>
   91     </body>
   92 </html>
   93 
   94

diseno_tres_columnas.png