Search code examples
csspositionpositioning

alignment issue with inline-blocks of different heights

I'm trying to get the blocks pictured here to align with each other, but if they are different heights, for some reason the shorter div aligns to the bottom of the container div. Neither div has any sort of padding or margin that would cause this behavior. What do I need to do to get them to align to the top of the div?

enter image description here enter image description here

Solution

  • vertical-align:top on the elements that you want to be vertically aligned (not on the parent), as they are display:inline-block.