Vertical align : baseline doesnt work in Chrome

Question

I have this really silly question to be honest. Anyways here goes. Ive been trying to use the vertical align: baseline; which is working in itself. The problem is that it works in IE and Firefox. My problem is that for some wierd reason it doesnt work in Chrome. a screenshot of the problem in chrome http://img576.imageshack.us/img576/8976/chromem.png

And this is how its supposed to look like ( There is a 14px padding else it would be at the very top) http://img62.imageshack.us/img62/140/firefoxi.png it looks the same in IE as in firefox.

Im not using a table to my images and texts (Just pointing out) I hope that someone can help me because this has been giving me headaches for 2 days now almost :(

Answer 1

If you set the background div to display: table and each of it's children to display: table-cell, it should work.

#outer_div
{
    display: table; /* display: inline-table; works as well */
}

#outer_div div
{
    display: table-cell;
    vertical-align: baseline;
}