Como alinhar uma div ao topo de seu pai, mas mantendo seu comportamento de bloco embutido?

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

P: Como você pode alinhar a caixa1 e a caixa3 à parte superior da div principal 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;
}

Ajuda muito apreciada ...

Agradecimento: Esta pergunta é bifurcada de uma resposta fornecida anteriormente por https://stackoverflow.com/users/20578/paul-d-waite : Conseguindo que um elemento CSS redimensionasse automaticamente a largura do conteúdo e, ao mesmo tempo, centralizasse

Experimente a vertical-alignpropriedade CSS.

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

Aplique-o #box3também.

Como outros já disseram, vertical-align: topé seu amigo.

Como bônus, há um violino bifurcado com aprimoramentos adicionais que o fazem funcionar no Internet Explorer 6 e no Internet Explorer 7 também;)

Exemplo: aqui

Use alinhamento vertical: top; para o elemento que você deseja no topo, como demonstrei no seu jsfiddle.

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

Você pode adicionar float: left; para cada uma das caixas (caixa1, caixa2, caixa3).

http://jsfiddle.net/Wa4ma/

Ou você pode simplesmente adicionar algum conteúdo à div e usar a tabela em linha