[SOLVED] CSS {display: table;} and <img>

[frankmanl]

I set up this 3 column design, using css property "display: table;".
I just found out that when the first content in the right column is an image, it pushes down the content in the left and center column:
http://www.thestoryconnection.nl/frank-test
Deleting the image, or putting something else above it "solves" the problem:
http://www.thestoryconnection.nl/frank-test2
Now, I don't know if it's the display: table property that causes this (a year ago there was a reason to use this property, but I can't recall why) or if it's something else. I searched for float and clear properties, but can't find anything that explains this behaviour.

How can I solve this? I prefer leaving my template as it is and just adjust some css, but when necessary I of course will adjust the template.

Frank

[velden]

Don't ask why but:

Code: Select all

#linkerkolom, #rechterkolom {
    background-color: #ECF0F9;
    border-radius: 5px;
    display: table-cell;
    margin: 0;
    padding: 5px;
    vertical-align: top; // <-- this one seems to solve your issue
    width: 203px;
}

[frankmanl]

Great, thank you.