A la estructura agrega nada mas un clear:both
Código:
<div id="cuerpo">
<div id="der">DERECHA</div> <div id="principal"> principal </div> <div id="izq">IZQUIERDA</div>
<div class="clear"></div>
</div>
Si no deseas utilizar ese elemento adicional en la estructura, revisa esto:
http://www.positioniseverything.net/easyclearing.html
Cambios en CSS: (Flotar las capas a la izquierda)
Código:
#cuerpo{
margin: 10px 0 10px 0; /* Aqui define la unidad siempre, en este caso px */
}
#der{
width: 150px;
background-color: #999;
float: left;
}
#izq{
width: 190px;
background-color: #999;
float:left;
}
#principal{
background-color: #ffffff;
width: 630px; /* Le he quitado el padding para que solo pruebes */
float:left;
}
.clear {
clear: both;
}
Lo del padding y el margen extra que desees dejar para separar las capas, quedan a tu gusto. Nada mas recordar el Box Model Bug de IE v5 en el caso de agregar padding.
Espero te sirva. Cualquier cosa nos avisas.
