HTML5: Image in left "display: table-cell" element pushes down content in right element

Question

Given this little fiddle: http://jsfiddle.net/5Sw3h/8/

I have a navigation panel to the left, a content panel to the center and to give a little space on the right a panel there as well. These are placed using "display: table, display: table-cell" semantics.

I am currently experiencing that putting content in the left panel it seems to push the content in the content panel down by some, mostly for the image in there. However it seems to pus the content down a little in general.

I have tried things as setting padding to 0 on quite a few elements (as I first thought it was that), then I have tried vertical alignment on the content box, some relative positioning defining "top". But nothing has really helped...

I know I must have overlooked some obvious thing, just can't find it.

Can anyone help me find what I am missing?

Answer 1

Where you have display: table-cell, add vertical-align: top.

The initial value of vertical-align is baseline, which is causing the misalignment.