Layout básico – 3 columnas

Como primer artículo, mostraré cómo construir un layout con 3 columnas tableless, o sea, sin tablas, sólo con CSS.
Se construyen 3 ‘columnas’ con ‘div’ en HTML bruto:

<div id="todo">
   <h1>Layout con 3 Columnas</h1><br />
   <div id="izquierda">Izquierda</div><br />
   <div id="derecha">Derecha</div><br />
   <div id="contenido">
      <p>Contenido</p>
   </div><br />
</div>

Luego, comenzaremos a darle estilo con CSS. Aquí se definirán parámetros, primero, para el ancho del div contenedor #todo:

#todo {
   width:700px;  
}

Le fijamos el ancho a la columna de la derecha y de la izquierda:

#izquierda, #derecha {
   width:150px;  
}

y no nos olvidemos de la columna central:

#contenido {  	
   width:370px;  
}

Queda darle la posición a cada columna, para esto usaremos float:

#izquierda {  	
   float: left;  
}    
#derecha {  	
   float: right;  
}

Y le fijamos un margen para el div del centro, para que la columna de la izquierda no se vea afectada:

#contenido {  	
   margin-left: 160px;
}

Ver resultado final

El mismo pero con colores:

#todo { 
   width:700px; 
   background-color: #666;
}<br />
  h1 {
      font-family: Georgia, Tahoma; 
      color: #FFF; 
      text-align: center;
} <br />
  #izquierda, #derecha { 
      width:150px; 
      background-color: #333; 
      font-family: Georgia, Tahoma; 
      color: #FFF; 
      text-align: center;
}<br />
  #contenido { 
      width:370px; 
      background-color: #FFCC00; 
      font-family: Georgia, Tahoma; 
      color: #333; 
      text-align: center; 
      font-weight: bolder;
}<br />
#izquierda { 
   float: left; 
} 
#derecha { 
   float: right; 
}<br />
#contenido { 
   margin-left: 160px;
}

Listo, la estructura está terminada. Ahora, a darle más estilos y llenar el contenido del sitio.