Ni entiendo, porque si trabajas con un contenedor definido en pixeles, usas porcentajes en tus otros div. Porque además. no has definido todos los parámetros de referencia de los porcentajes y eso dará errores.
La forma en que lo resolví con tu configuración:
El margin del centro no debe tener margin a la derecha e izquierda (o sea 0px), el div derecha debe flotar a la derecha y no debe contener margin a la izquierda (o sea 0px).
Con el valor margin derecho del div izquierdo es como estableces la separación de div central con el div izquierdo y derecho.
Y pues a mi me funciono en todos los navegadores
Código HTML:
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#contenedor { border:solid 1px #000033;
margin:0 auto; /* remueve auto si no deseas centrarlo*/
padding:0; width:1050px;
}
#superior {
border:1px solid black;
margin:5px;
width:99%;
clear:both;
}
#arriba {
border:1px solid black;
margin:5px;
width:99%;
clear:both;
}
#izquierda {
float:left;
position:relative; /* mover en relación al flujo de div*/
border:1px solid black;
margin:10px 8px 5px 5px; /* el segundo valor es el que define la separación del centro*/
padding:5px;
width:20%;
}
#centro {
float: left;
position: relative;
border:1px solid black;
padding:5px;
margin:10px 0 5px; /* el centro debe tener un valor de 0 en margin-right y margin-left*/
width:54%;
}
#derecha {
float:right;
position:relative;
border:1px solid black;
padding:5px;
margin:10px 5px 5px 0; /* la derecha debe tener un valor de 0 en margin-left*/
width:20%;
}
#abajo {
border:1px solid black;
margin:5px 5px;
width:99%;
clear:both;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="superior">
<span>hola</SPAN>
</div>
<div id="arriba">
<span>hola</span>
</div>
<div id="izquierda">
<span>hola</span>
</div>
<div id="centro">
<span>hola</span>
</div>
<div id="derecha">
<span>hola</span>
</div>
<div id="abajo">
<span>hola</span>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>