Hola Hinfra! Que tal? Soy nuevo por estos pagos, y dando vueltas por esta parte del foro me tope con tu inquietud.
Yendo a tu duda:
Probaste de agregarle "margin-top: 30px;" a cada boton, excepto el boton 2 que es que tiene la altura de mayor jerarquia?
Es decir:
Código CSS:
Ver originalbody{
text-align:center;
background-color:#b1005b;
}
#contenedor{
margin: auto;
margin-top: 150px;
width: 900px;
height: 400px;
text-align:left;
background-color:#fff;
}
#boton1{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float: left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
#boton2{
color:#000;
background-color:#ccc;
width: 150px;
height: 230px;
float:left;
cursor: pointer;
position:relative;
}
#boton3{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
#boton4{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
#boton5{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
#boton6{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
#aa{
background-color:#ff0000;
width: 900px;
height: 200px;
float:left;
}
Agregandole el margen al top de cada boton, se puede llegar al resultado que deses en la imagen!
Saludos espero haber interpretado bien tu pregunta!