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

It would help a lot if you added line breaks to your code... — ElendilTheTall
– ElendilTheTall, Commented Jan 25, 2014 at 21:58
I want to make a whole website. I've read that you do not use tables for design. — user3236231
– user3236231, Commented Jan 25, 2014 at 22:07

Jack · Accepted Answer · 2014-01-25 22:04:03Z

2

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/

answered Jan 25, 2014 at 22:04

Jack

1,9411 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3236231 Over a year ago

Thank you, for 3 hours I've been looking for this tag... :D

Jack Over a year ago

No problem, here is a useful article on the matter if you're interested.

Collectives™ on Stack Overflow

CSS display table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related