Bueno muchas gracias por vuestras respuestas y ayuda. Finalmente creo que ya he encontrado el problema: Se trata de la propiedad "margin-left", que yo creia que al aplicarla a un div, hacia referencia a su contenedor, y no!
Mejor dejo el còdigo por aquí por si alguien lo necessita:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#principal{
position: static;
width: 80%;
background-color: #788DA2;
height: 80%;
margin: 0 auto;
display: table;
}
#leftImg
{
position: relative;
height: 20%;
width: 20%;
margin-left: 3%;
margin-top: 20%;
border: thick dotted #EDC080;
float: left;
}
#centerImg
{
position: relative;
height: 80%;
width: 40%;
margin-left: 5%;
border: thick dotted #CCCCCC;
float: left;
}
#rightImg
{
position: relative;
height: 20%;
width: 20%;
margin-left: 5%;
margin-top: 20%;
border: thick dotted #800080;
float: left;
}