Question

I would like to have a div display:inline-block with overflow:hidden. My problem is that the overflow:hidden pushes down adjacent inline-block elements.

Demonstration:
http://jsfiddle.net/vNDmX/

Can anyone explain why this happens, and how do I fix it?

Update: This is a firefox specific issue. float:left works somewhat, but it still mucks with the spacing: http://jsfiddle.net/vNDmX/3/.

Answer 1

This is a Firefox-specific bug (here’s a related question I found when investigating this). The fix seems to be setting vertical-align: top.

Here’s an example of the fix, along with some borders added to show elements:

http://jsfiddle.net/vNDmX/5/

button {
    vertical-align: top;
}