Sí ponle al izquierda y al derecha un float: left; y agrega una cosa al final. Queda así:
Código:
body{
text-align: center;
}
#contenedor{
margin: 0 auto;
text-align: left;
}
.arriba{
position: relative;
width:800px;
height:90px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid #788DA2;
background-color : #788DA2;
margin: 0px;
}
.izquierda{
float: left;
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: red;}
.derecha{
float: left;
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: blue;}
Código HTML:
<div id="contenedor">
<div id="cabeza" class="arriba"></div>
<div id="izquierda" class="izquierda"></div>
<div id="derecha" class="derecha"></div>
<div style="clear: both"></div>
</div>
Por cierto, no te recomiendo usar el <center>, está desaprobado. Sería mejor como te lo he puesto ahora: con un div contenedor.
Y no hace falta que pongas id="cabeza" y luego class="arriba". Puedes quitar el class="arriba" y sustituir .arriba con #cabeza. Y así también con los demás.