You should be using display:inline-block
for layout, not display:inline
.
display:inline
is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block
instead.
So I went to your fiddle and changed the inline
to inline-block
.
Guess what.... that fixed the problem; it now looks the way you wanted.
See http://jsfiddle.net/NWmpL/8/
You could also consider using float:left
to achieve this kind of layout, but since we've got a working answer with inline-block
, I'll leave it at that.