Skip to main content


Showing posts from June, 2015

Inline-block Aligning Issue

I ran into a weird issue related to the aligning of inline-block HTML elements. I had two inline-block elements next to each other:

And whenever I added text (no matter how far down the tree within one of those inline-block elements) this occurred:

The element that contained text dropped vertically. It seemed odd to me but apparently has to do with how inline-block level elements are aligned. This StackOverflow question and answer addresses the issue. The solution is to simply put the "overflow" property to something other than "visible" on the inline-block element. So, I used "overflow: hidden;" to fix the problem (Note: the second highest rated answer in the link provided states to specify "vertical-align:top" but this just made the issue worse for me).