Come allineare un div alla cima del suo genitore ma mantenendo il suo comportamento inline block?

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

D: Come puoi allineare box1 e box3 alla parte superiore del div genitore 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;
}

Aiuto molto apprezzato ...

Ringraziamento: questa domanda viene formulata da una risposta precedentemente fornita da https://stackoverflow.com/users/20578/paul-d-waite : ottenere un elemento CSS per ridimensionare automaticamente alla larghezza del contenuto e allo stesso tempo essere centrato

Prova la vertical-alignproprietà CSS.

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

Applicalo anche a #box3.

Come altri hanno già detto, vertical-align: topè tuo amico.

Come bonus qui è un violino biforcuto con miglioramenti aggiunti che lo fanno funzionare anche in Internet Explorer 6 e Internet Explorer 7;)

Esempio: qui

Usa vertical-align: top; per l'elemento che vuoi in alto, come ho dimostrato sul tuo jsfiddle.

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

È possibile aggiungere float: left; per ciascuna delle caselle (box1, box2, box3).

http://jsfiddle.net/Wa4ma/

Oppure potresti semplicemente aggiungere un po 'di contenuto al div e usare la tabella in linea