display:table in a div not showing like a table

http://img580.imageshack.us/img580/1811/sinttulooh.png

I have the problem you see in the picture. That's a div with three columns. This div has a display:table property, and every column has a display:table-cell property. The problem is that, as you see, the left and right columns begin their content when the middle one has finished its content, and they should start writing from the top, as the middle column.

I don't know why it behaves like that, because there is no conflict with any other rule in the rest of the CSS. And I've seen in other examples that it is not necessary to define table-column or ta开发者_如何学Pythonble-row to get that style.

How should I declare the divs to get the desired structure?

Here is the code: http://jsfiddle.net/3fMM3/2/

You don't need tables there and also you don't need to make put display:table.

Just use css styling to make a three column layout, this is what appears you want to achive.

Check this link for example :

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Here's a working example : http://jsfiddle.net/NyqGQ/1/

Note the "border-collapse" property, to merge container's and children border.

Try to set the vertical-align property to top on your table-cells.

.your-table-cells
{
    vertical-align:top;
}