Align inline-block DIVs to top of container element

Question

When two inline-block divs have different heights  why does the shorter of the two not align to the top of the container   DEMO     x000D   x000D   container    x000D      border  1px black solid  x000D      width  320px  x000D      height  120px      x000D    x000D   x000D   small   x000D      display  inline-block  x000D      width  40   x000D      height  30   x000D      border  1px black solid  x000D      background  aliceblue      x000D    x000D   x000D   big   x000D      display  inline-block  x000D      border  1px black solid  x000D      width  40   x000D      height  50   x000D      background  beige      x000D    x000D   lt div class  container  gt  x000D       lt div class  small  gt  lt  div gt  x000D       lt div class  big  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    How can I align the small div at the top of its container

User · Accepted Answer

Because the vertical-align is set at baseline as default   Use vertical-align top instead    small      display  inline-block      width  40       height  30       border  1px black solid      background  aliceblue         vertical-align top      http   jsfiddle net Lighty 46 RHM5L 9   Or as  f00644 said you could apply float to the child elements as well

User · Answer

Add overflow  auto to the container div   http   www quirksmode org css clearing html This website shows a few options when having this issue

User · Answer

You need to add a vertical-align property to your two child div s   If  small is always shorter  you need only apply the property to  small  However  if either could be tallest then you should apply the property to both  small and  big    container       border  1px black solid      width  320px      height  120px          small      display  inline-block      width  40       height  30       border  1px black solid      background  aliceblue       vertical-align  top         big       display  inline-block      border  1px black solid      width  40       height  50       background  beige       vertical-align  top         Vertical align affects inline or table-cell box s  and there are a large nubmer of different values for this property  Please see https   developer mozilla org en-US docs Web CSS vertical-align for more details

User · Answer

lt style type  text css  gt          div     text-align  center                        img1              width  150px              height  150px              border-radius  50                        span              display  block                  lt  style gt    lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt div gt     lt input type  password  class  secondInput mt-4 mr-1  placeholder  Password  gt     lt span class  dif  gt  lt  span gt     lt br gt     lt button gt ADD lt  button gt   lt  div gt    lt script type  text javascript  gt      button   click function           dif   html   lt img  gt

[css] Align inline-block DIVs to top of container element

Examples related to css