¿Cómo alinear un div a la parte superior de su padre pero manteniendo su comportamiento de bloqueo en línea?

Ver: http://jsfiddle.net/b2BpB/1/

P: ¿Cómo puede hacer que box1 y box3 se alineen con la parte superior del div padre boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

Ayuda muy apreciada ...

Reconocimiento: esta pregunta se bifurca a partir de una respuesta dada anteriormente por https://stackoverflow.com/users/20578/paul-d-waite : Obtener un elemento CSS para cambiar automáticamente el tamaño del ancho del contenido y al mismo tiempo estar centrado

Prueba la vertical-alignpropiedad CSS.

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

Aplícalo #box3también.

Como han dicho otros, vertical-align: topes tu amigo.

Como beneficio adicional, aquí hay un violín bifurcado con mejoras adicionales que lo hacen funcionar en Internet Explorer 6 e Internet Explorer 7 también;)

Ejemplo: aquí

Use vertical-align: top; para el elemento que desea en la parte superior, como lo he demostrado en su jsfiddle.

http://www.brunildo.org/test/inline-block.html

Puede agregar flotante: izquierda; para cada una de las cajas (caja1, caja2, caja3).

http://jsfiddle.net/Wa4ma/

O simplemente podría agregar algo de contenido al div y usar inline-table