overflow: hidden ; causing alignment issues in firefox

Question

I have a layout which renders perfectly fine in Webkit based browsers but in internet explorer and firefox the vertical alignment is off. The simplest example of the code is

Answer 1

For inline-block I usually specify vertical-align:top to alleviate vertical alignment issues. And be aware that there will be horizontal gaps between the sibling divs that have inline-block, which can only be fixed by killing the literal whitespace in the HTML.

And I hope you are using a doctype.

Hope this helps, otherwise please setup a jsfiddle so I can visually see this.