Un layout fijo puede ser más fácil de construir para algunos, ya que todos los elementos están ordenadamente dispuestos, cada uno con su ancho fijo. Reseteando el margin y padding al principio de todos los tags, torna más fácil lograr una hegemonía entre browsers:

* {

     margin: 0;

     padding: 0; 

}

Mostraré una técnica bastante simple de diagramar un sitio utilizando CSS, de manera que hacerlo fijo o elástico (líquido le suelen llamar algunos) sea cosa de cambiar 4 caracteres en tu hoja de estilos. De un principio:

Comenzaremos a diagramar un sitio de 3 columnas, 2 laterales (menú izquierdo y publicidad derecha) y al medio el contenido; header y footer también van, claro. La manera de hacerlo es siempre comenzar de arriba hacia abajo (header, columnas, contenido, footer) y tener en el HTML primero ambas columnas, antes que el contenido mismo. Así, ambas columnas tendrán un ancho fijo (no queremos que nuestro menú quede flotando si la resolución del computador es mayor, tampoco la publicidad que son usualmente imágenes de ancho fijo, o GoogleAds) y el contenido será el que crezca en el caso de una mayor o menor resolución, al igual que el header y el footer. Para esto hay que tener preparado una imagen de fondo que crezca si es necesario (background-repeat: repeat-x; si este fuera el caso). Todo esto va enmarcado por un DIV contenedor, el que tendrá un width definido en pixeles para el layout fijo (y centrado con margin: 0 auto;), y basta con eliminar este ancho para el sitio verse elástico, o líquido. Recuerda, sólo 4 caracteres para cambiar esta característica.

Creo que quedó bien explicada la intención, aquí va el HTML primero (resumido):


     
     
     
Publicidad

     

          

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque aliquet……….


     

     

y el CSS que lo mostrará de ancho fijo:

div#contenedor {

     width: 750px;

     margin: 0 auto;

     border: 1px solid #333;

}

div#header, div#footer {

       height: 100px;

       clear: both;

       background-color: #333;

       color: #F90;

       font-size: 14px;

       font-weight: bolder;

}

div#footer {

       height: 30px;

  }

  div#menu, div#publicidad {

       width: 160px;

       border: 1px solid #F90;

}

div#menu {

      float: left;

}

div#publicidad {

       float: right;

}

div#contenido {

       margin: 0 170px;

}

Ver ejemplo de Layout Fijo

Ahora, la idea es no tocar el HTML. Si el cliente se le ocurrió que el sitio debiera adaptarse a la resolución del monitor del usuario, no debieras tener tiempo siquiera para preocuparte. Basta con comentar el width: 750px; y verás de inmediato la transformación:

div#contenedor {

     /* width: 750px; */ 

     margin: 0 auto;

     border: 1px solid #333;

}

Ver ejemplo de Layout Elástico (view source para ver el HTML y el CSS completo)

El secreto está en saber cómo diagramar bien un sitio, cómo comenzar a ver la estructura del mismo para que posibles cambios posteriores sean lo menos doloroso, y que quiten el menos tiempo posible. Adelantarse a lo impredecible.

Espero haya quedado claro.