CODEWITHSUNDEEP
csshtmllayout
Jens
Jens

Reputation: 3412

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

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?

Upvotes: 6

Views: 3014

Answers (2)

Iceman
Iceman

Reputation: 25

thirtydot already provided a great answer. However, you will face a new problem in Safari and Opera so you better be sure you have set the width to all table-cell elements. Another issue is the display table/table-cell support in IE 6/7 where you can use a HTC script written by Tanalin here http://tanalin.com/en/projects/display-table-htc/.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

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

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

Upvotes: 15

Related Questions