title: How to align a div to the top of its parent but keeping its inline-block behaviour?
body: <p>See: <a href="http://jsfiddle.net/b2BpB/1/" rel="noreferrer">http://jsfiddle.net/b2BpB/1/</a></p>
  
  <p>Q: How can you make box1 and box3 align to the top of the parent div <code>boxContainer</code>?</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Help much appreciated...</p>
  
  <p>Acknowledgement: This question is forked from an answer previously given by <a href="https://stackoverflow.com/users/20578/paul-d-waite">https://stackoverflow.com/users/20578/paul-d-waite</a>  : <a href="https://stackoverflow.com/questions/5343778/getting-a-css-element-to-automatically-resize-to-content-width-and-at-the-same-t/5685908#5685908">Getting a CSS element to automatically resize to content width, and at the same time be centered</a> </p>