Question

In the jsfiddle example below, I’d like the left column (#left) and the right hand columns (#right) to vertically align to the middle of the middle column (#middle). The height of the middle column (#middle) can vary.

This is for mobile devices, hence the use of

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 

This part seems to work as required on screen resize.

Can this be achieved using CSS only (no javascript)?

See: http://jsfiddle.net/TGsdg/4/

Answer 1

Only way to do this is to use display:table(-cell) with table-layout:fixed. This will only work, however, if your right & left colums can have a fixed width:

http://jsfiddle.net/TGsdg/7/