Tenemos que crear una estructura de nuestro diseño con ubicaciones exactas que vamos realizar con hojas de estilo (CSS).

Para empezar con esta estructura vamos a crear un archivo denominado estilo.css al que le vamos a agregar el siguiente codigo:

 
#externo, #encabezado, #izquierda, #derecha, #centro, #derecha, #piedepagina { text-align:left; border:solid 1px #000; padding: 10px; }
#izquierda, #centro, #dderecha { margin: 10px 0; }
#externo { position:relative; margin: 0 auto; width:1000px; }
#encabezado { width:978px; height:150px; }
#piedepagina { width:978px; height:150px; clear:both; }

Nota: Para visualizar la estructura de nuestro diseño inicial, coloque un borde en todos los DIV que luego eliminaremos.

En la actualidad, nuestras capas de diseño se muestran uno debajo del otro dentro de la DIV con id "externo".

Ahora podemos ver en la imagen el resultado que tenemos hasta ahora de nuestro diseño:

Ahora tengamos en cuenta que podemos tener distintas posibilidades de diseño colocando las columnas de acuerdo a nuestra necesidas, por ejemplo:

• IZQUIERDA, CENTRO, DERECHA
• IZQUIERDA, DERECHA, CENTRO
• CENTRO, IZQUIERDA, DERECHA
• IZQUIERDA, CENTRO
• CENTRO, DERECHA
• ETC...