Mover bloque

[leoass]

hola, como les va? Hoy vengo con un problema en particular. Miren esta imagen:



lo que quiero hacer es mover el bloque del medio para que quede mas centrado y a una distancia de la parte roja horizontal, mas o menos como el bloque de la izquierda. y tmb quiero subir el bloque de la derecha a la misma altura y separarlo un poco del borde de la pantalla. aqui los codigos:

Bloque central

Código CSS:

.contenedor {
/* propiedades obligatorias */
overflow: hidden;
position: relative;
/* propiedades optativas */
border-radius: 20 20 20 20;
background-color: #202931;
border-bottom: 5px solid #404951;
border-left: 5px solid #404951;
border-top:5px solid #404951;
border-right:5px solid #404951;
color: #FFF;
top:-60;
margin:0 auto;
padding: 30px;
width: 470px;
}
#corner
{
/* lo dimensionamos y lo posicionamos de manera absoluta */
    display: block;
    height: 100px;
    position: absolute;
    width: 100px;
/* lo rotamos */
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* la posición del triangulo*/
    top:-50px;
    right:-50px;
/* otras propeidades optativas */
    background-color: #A00;
    box-shadow: 0px 0px 50px #000 inset;
}
#corner-ad
{
    right: -30px; top: -70px;
}
#izquierda
{
    position:absolute;
    top:200px;
    left:23px;
    width:200px;
    margin-top:10px;
    background-color:#202931;
    border-radius:15 15 15 15;
    border-top:5px solid #404951;
    border-bottom:5px solid #404951;
    border-left:5px solid #404951;
    border-right:5px solid #404951;
}
#derecha
{
    position:abslute;
    top:;
    width: 120px; 
    float: right;
    border-radius:15 15 15 15;
    background-color:#202931;
    border-top:5px solid #404951;
    border-bottom:5px solid #404951;
    border-left:5px solid #404951;
    border-right:5px solid #404951;
}
 

NOTA: corner, es la esquina roja. izquierda es el bloque de la izquierda, derecha lo mismo y el central es contenedor.

aqui el html:

Código HTML:

<div id="derecha">
	Esto seria la columna e la derecha. Esto seria la columna e la derecha. Esto seria la columna e la derecha. Esto seria la columna e la derecha. 
</div>
<div class="contenedor">
	<a id="corner" href="la_URL" > el enlace </a>
	<p>¡Bienvenido a la pagina de pruebas!
	<p>No tiene imágenes, pero tiene estilo.
	<p>Debería haber más cosas aca, pero todavía no sé qué poner.
</div>
<div id="izquierda">
	esto seria la columna de la izquierda. esto seria la columna de la izquierda.esto seria la columna de la izquierda.esto seria la columna de la izquierda.
</div>