La columna1 flota hacia izquierda y tiene un ancho fijo:
#columna1 {
float: left;
width: 9.25em;
background: #eee;
}
Luego es importante destacar que la columna2 contiene la columna3:
<div id="columna2">
<div id="columna3">
Columna derecha<br>
Columna derecha<br>
Columna derecha<br>
Columna derecha<br>
Columna derecha<br>
Columna derecha<br>
Columna derecha<br>
Columna derecha<br>
</div>
<div id="articulos">
<div class="articulo" id="art1">
<h2>Titulo de articulo 1</h2>
<p>
...............
La hoja de estilo define un ancho automático para la columna2 (también es importante la propiedad
margin-left para que no invada la columna1):
#columna2 {
width: auto;
margin-left: 10em;
}
La columna3 que está dentro de la columna2 flota a derecha (con lo que obtenemos la tercer columna
dentro de la página):
#columna3 {
float: right;
width: 16em;
padding:1em;
background: #eee;
}