HTML5: image in left element "display: table-cell" discards content in the right element

Question

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

I have a navigation pane on the left, a content pane toward the center, and a small space to the right of the pane. They are placed using the semantics of "display: table, display: table-cell".

Currently, I feel that placing content in the left pane seems to make the content in the content pane unavailable to some, mainly for the image. However, it seems that overall the content is small.

I tried things as an installation addition to 0 on quite a few elements (as I thought it was at first), then I tried vertical alignment in the content window, with some relative positioning determining the "top". But nothing helped ...

I know that I must have forgotten about some obvious thing, I just can’t find it.

Can someone help me find what I am missing?

Answer 1

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

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

Answer 2

The satellite has already given an excellent answer. However, you will encounter a new problem in Safari and Opera, so make sure you set the width for all table elements. Another issue is display / table-cell table support in IE 6/7, where you can use the HTC script written by Tanalin here http://tanalin.com/en/projects/display-table-htc/ .