Hola
Soy el nuevo, no soy un profesional pero sí llevo 3 meses enviciado a los códigos y he aprendido algunas cosas a bases de días con pequeños errores...
Resumo, para poner el div central que es el contenedor a la misma altura que el izquierdo, pues pones el mismo top o un margin-top.
Para colocar el div derecho a la misma altura y más separado del borde, puedes poner un margin-right o un simple right y especificar la distancia del margen derecho. Para ponerlo a la misma altura, pues simplemente pones el mismo top que al div contenedor central y al div izquierda
Respecto a centrar el contenedor central puedes poner directamente un center <center> en el html y a partir de ahí poner un left o un right para moverlo respecto al centro. (Eso me pasó a mí, pasé días intentando centrar un bloque con Javascript, con PHP, con TODO, y finalmente se me ocurrió usar el <center> y... Luego de 3 días, me di de cabezazos con la pared por tal tontería
)
Código HTML:
.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; /* -- No acabo de entender porqué tienes un 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:absolute;
top:200px; /* -- Especificar la misma altura que al bloque #izquierda -- */
width: 120px;
right:30px; /* -- Margen respecto del borde derecho -- */
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;
}
Este sería el HTML, yo lo pondría así:
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>
<center>
<div class="contenedor" style="right o left: XXpx;>
<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>
</center>
<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>
Espero haberte ayudado en algo, empezando por haber entendido tu pregunta
Saludos.