css - How to align a div to the top of its parent but keeping its inline-block behaviour?

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

Q: How can you make box1 and box3 align to the top of the parent div 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;
}

Help much appreciated...

Acknowledgement: This question is forked from an answer previously given by https://stackoverflow.com/users/20578/paul-d-waite : Getting a CSS element to automatically resize to content width, and at the same time be centered