para que estén uno al lado del otro deberías ponerlos dentro de OTRO div que esté centrado, y ponerles position:relative ...
seria algo asi:
Código HTML:
<div id="contenedor">
<div id="derecha"></div>
<div id="izquierda"></div>
</div>
entonces en el css pones:
Código:
#contenedor{
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
#derecha{
width: 50%;
height: 100%;
float: right;
}
#izquierda{
width: 50%;
height: 100%;
float: left;
}
OTRA opción que también puede funcionar es crear los dos divs
Código HTML:
<div id="izq"></div>
<div id="der"></div>
y poner en el CSS lo siguiente:
Código:
#izq{
position: absolute;
width: 50%;
height: 100%;
left: 0px;
top: 0px;
}
#der{
position: absolute;
width: 50%;
height: 100%;
right: 0px;
top: 0px;
}
aunque con esta opcion no podrías hacer que se centren en la pantalla y ocupen un ancho que no sea el 50%.. fijate cual te sirve mas :)
adios!