maquetar contenido

[noruas]

Te faltaba colocar los height: 100%; para las cajas flotantes asi como la propiedad clear, que se la habias puesto a una de las cajas flotantes. Si a la caja de contenido le das una altura de digamos 500px, las otras 3 tengan o no contenido suficiente para llenar el espacio, lo llenaran.

Dale un vistazo ahora, ami me funciona correctamente.

Código CSS:

#contenido {
    margin:0 auto;
    width:950px;
    border:1px solid black;
}
#contenido_izquierda {
    border:1px solid black;
    width:200px;
    float:left;
    height: 100%; /*<----- */
}
#contenido_central {
    border:1px solid black;
    width:500px;
    float:left;
    height: 100%; /*<----- */
}
#contenido_derecha {
    border:1px solid black;
    width:200px;
    float:left;
    height: 100%; /*<----- */
}
.clear{
    clear:both; /*<----- */
    }
footer {
    margin: 0 auto;
    width:950px;
    border:1px solid black;
}
 

Código HTML:

<section id="contenido">
  <aside id="contenido_izquierda"> izquierda </aside>
  <section id="contenido_central"> central </section>
  <aside id="contenido_derecha"> derecha </aside>
  
  <br class="clear" /> <!--- Colocar tras las cajas que flotan, pero antes de 
que se cierre la que las contiene a todas ellas (puedes usar tambien una 
caja vacia) -->
  
</section>
<footer> pie de pagina </footer>
 

Saludos.