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

Question

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

User · Answer

As others have said  vertical-align  top is your friend  As a bonus here is a forked fiddle with added enhancements that make it work in Internet  Explorer  6 and Internet  Explorer  7 too    Example  here

User · Answer

Try the vertical-align CSS property    box1       width  50px      height  50px      background   999      display  inline-block      vertical-align  top     here        Apply it to  box3 too

User · Answer

Or you could just add some content to the div and use inline-table

User · Answer

Use vertical-align top  for the element you want at the top  as I have demonstrated on your jsfiddle   http   www brunildo org test inline-block html

User · Answer

You can add float  left  for each of the boxes  box1  box2  box3    http   jsfiddle net Wa4ma

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

Example: here

Examples related to css

Examples related to html