CSS display table

Question

Unfortunately, the left table-cell is positioned further down the page than the table-cell adjacent to it, and I do not understand why.

HTML

<div id="cmo">
    <div style="display: table-row;">
        <div class="table-cell" id="psycho_oben_links">
             <h3>Hello world!</h3> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="table-cell" id="trenner1">&nbsp;</div>
        <div class="table-cell" id="trenner2">&nbsp;</div>
        <div class="table-cell" id="psycho_oben_rechts">
            <img src="http://bit.ly.example/1j77AoG" alt="">
        </div>
    </div>
</div>

CSS

#cmo {
    display: table;
}
#trenner1 {
    border-right: 0px solid #aaa;
}
#trenner2 {
    border-left: 1px solid #aaa;
}
.tableee {
    display: table;
}
.table-cell {
    display: table-cell;
}

JsFiddle

Answer 1

By default the vertical alignment of table cells are baseline, change this to top, middle or bottom depending on the desired effect. Just be consistent.

.table-cell {
    display: table-cell;
    vertical-align: top;
}

http://jsfiddle.net/LuyxH/