Para empezar ya a relacionar nuestra plantilla con DRUPAL empezaremos a usar una tècnica de CSS que es muy util para trabajar en un diseño dinámico.Para esto vamos a crear una regla que nos permita mantener el diseño aun cuando alguna de la columnas no este presente.

Para empezar agregamos un selector de clase CSS en la etiqueta BODY del documento que nos permitira asignale una posicion al DIV.

Como vimos anteriormente podemos tener varias combinaciones para tener distintos tipos de diseño y decidimos utilizar el mas común como en la mayoría de sitios y blogs, luego si lo deseamos podemos hacer los cambios necesarios para tener otro tipo de diseño

Vamos a especificar las siguientes posibles combinaciones:

• IZQUIERDA, CENTRO
• IZQUIERDA, CENTRO, DERECHA
• CENTRO, DERECHA

Las clases CSS que vamos a utilizar en el tag BODY seran los siguientes:

• lateral-izquierda: se utilizara para mostrar la columna IZQUIERDA dejando espacio para el CENTRO sin mostrar la columna DERECHA
• lateral-derecha: se utilizara para mostra la columan DERECHA dejando espacio para el CENTRO sin mostrar la columan IZQUIERDA
• laterales: se utilizara para posicionar la columna IZQUIERDA, la columna CENTRO y la columna DERECHA

Esto quiere decir que cuando colocamos lateral-izquierda en el atributo class del tag BODY vamos que tener un grupo de selectores CSS que estan predefinidos para modificar el diseño sin la columna DERECHA y adaptando el CENTRO, en caso de que no se desee mostrar la columna IZQUIERDA se usara lateral-derecha

Todo esto se hace mediante CSS y lo podemos modificar mas adelante pero tenemos que tener en cuenta que no se esta cambiando la posicion de la columna, es decir, la izquierda es la columna de la izquierda, entonces usted puede cambiar en adelante, sin embargo, vale la pena recordar aquí que no estamos cambiando la posición de la columna, es decir, la izquierda es la columna de la izquierda, si queremos cambiar el contenido de la IZQUIERDA DERECHO hay que usar otros selectores que se vera mas adelante cuando se empiece a trabajar con Drupal.

Por lo tanto, habra que agregar toda una serie de selectores para cambiar las posiciones de las capas de izquierda, derecha y centro de nuestro diseño.

 /**
 * Para un diseño con columna a la IZQUIERDA y CENTRO a derecha
 */
.lateral-izquierda #izquierda {}
.lateral-izquierda #centro {}
.lateral-izquierda #derecha {}

/**
 * Para un diseño con una columna a la DERECHA y el CENTRO a izquierda
 */
.lateral-derecha #izquierda {}
.lateral-derecha #centro {}
.lateral-derecha #derecha {}

/**
 * Para un diseño a 3 columnas
 */
.laterales #izquierda {}
.laterales #centro {}
.laterales #derecha {}

Al principio parece un montón de código, pero el resultado final es más de lo deseado.

En virtud de los cambios en el archivo ya estilo.css con las ubicaciones de todos los casos anteriormente descritos:

  
/**
 * Restablece el margen y el relleno de todos los elementos HTML
 */
* { margin: 0; padding: 0; }

/**
 * Propiedades configuradas para dar una estética visual inicial
 */
#externo, #cabecalho, #esquerda, #direita, #centro, #direita, #rodape { text-align: left; border: solid 1px #000; padding: 10px; }

/**
 * Margen predeterminado de izquierda, centro y derecha
 */
#esquerda, #centro, #direita { margin: 10px 0; }

/**
 * Externo
 */
#externo { position: relative; margin: 0 auto; width: 1000px; }

/**
 * Encabezado
 */
#encabezado { width: 978px; height: 150px; }

/**
 * Para un diseño con una columna a IZQUIERDA y el CENTRO a derecha
 */
.lateral-izquierda #izquierda { width: 170px; float: left; }
.lateral-izquierda #centro { width: 776px; float: left; margin-left: 10px; }
.lateral-izquierda #derecha { display:none; }

/**
 * Para un diseño con una a DERECHA y el CENTRO a derecha
 */
.lateral-derecha #centro { width: 776px; float: right; margin-right: 10px; }
.lateral-derecha #derecha { width: 170px; float: right; }
.lateral-derecha #derecha { display:none; }
/**
 * Para un diseño de 3 columnas
 */
.laterais #izquierda { width: 170px; float: left; }
.laterais #derecha { width: 170px; float: right; }
.laterais #centro { width: 572px; margin-left: 203px; }

/**
 * Pie de pagina
 */
#rodape { width: 978px; height: 150px; clear: both; }