CODEWITHSUNDEEP
htmlcss
Boel
Boel

Reputation: 976

How to send the content inside divs with display: table-cell to the top of they container?

I want to position the content of these two divs to the top.

HTML

<div class="menu">
    <div></div>
</div>

<div class="content">
    <h1>SDFSDFSD SDFSD</h1>
    <h1>SDFSDFSD SDFSD</h1>
    <h1>SDFSDFSD SDFSD</h1>
</div>

css .

menu {
    display: table-cell;
    background-color: yellow;
    width: 20%;
}

.menu > div {
    padding: 20px;
    background-color: red;
    vertical-align: top;
}

.content {
    display: table-cell;
    background-color: blue;
    width: 80%;
}

http://jsfiddle.net/99u4vm3g/

I tried with vertical-align: top and with position: absolute and top:0 with no luck.

What should I do to send those content to the top of their containers?

Thanks in advance!

Upvotes: 1

Views: 42

Answers (2)

Huangism
Huangism

Reputation: 16448

You need to put the vertical-align on the table-cell elements

.menu {
    vertical-align: top;
}

.content {
    vertical-align: top;
}

http://jsfiddle.net/99u4vm3g/1/

You are going to see the text still not at the top and that is due to the margin on the header elements

This one has no margin on the header tags http://jsfiddle.net/99u4vm3g/2/

Upvotes: 1

Stickers
Stickers

Reputation: 78706

You added vertical-align:top to the wrong place, it should be applied to the table-cell elements.

Updated: http://jsfiddle.net/tfqmwko1/

Upvotes: 1

Related Questions