Tienes derecha2 fuera de derecha, cuando tiene que estar dentro. Y priemero coloca el contenido de #derecha en el html y después el de #derecha2.
Compara las propiedades de derecha2 tuyo con las que yo te puse al inicio
Las tuyas:
Cita: #derecha{
position:relative;
width:383px;
height:246px;
float:left;
margin-right:5px;}
#derecha2{
position:relative;
width:383px;
height:246px;
float:left;
margin-right:5px;
z-index:20;
}
Las propuestas:
Cita: #derecha2 {
position:absolute;
top:0; /*en función de los tamaños de "derecha" */
left:0; /*en función de los tamaños de "derecha" */
opacity: .7;/*esto es una frivolidad*/
}
No necesitas definir margen derecho, pues con el top/left ya lo colocas en su lugar, y claro que te sobresaldrá #derecha2 de #derecha, pues son del mismo tamaño y encima le añades un margen.