Place text to the bottom instead of right below the other text

Question

I'm using different DIV tags to act as tables and I want to get another DIV at the bottom of the content DIV.

<div class="table">
    <div class="table-row">

        <div class="table-information">
            Content
        </div>

        <div class="table-content">
            More content

            <div class="extra">
                Here's the extra content
            </div>
        </div>

    </div>
</div>

Here's the CSS:

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-information {
    background-color: #eaeaea;
    height: 150px;
    padding: 10px 15px;
    width: 150px;
}

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
}

.extra {
    vertical-align: bottom
}

As you can see I have vertical-align: bottom; for the extra class. I want to have the content within that DIV at the bottom and not right below the text More content. But nothing happens when I'm trying this solution.

http://jsfiddle.net/edgren/3jjbV/

How can I solve this problem?

Thanks in advance.

vertical-align: bottom applies to the content of .extra, not the div itself. — Mark Parnell
Ok. How can I make the DIV and it's content at the bottom of the table-content DIV tag? — Airikr

trajce trajce · Accepted Answer · 2013-04-18T00:12:30

Here is 1 way to achieve that

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
    position:relative;
    width:150px;
}
.extra {
    vertical-align: bottom;
    bottom:0;
    position:absolute;
}

I do it by adding relative position to the container table-content and then absolute positioning bottom to the extra.
here is a fiddle

Another way is like this:

.extra {
    vertical-align: bottom;
    display:table-cell;
    height: 150px;
    width:150px;
}

Here is a fiddle for the 2nd option.
From these 2 options personally i would go with the 1st one, but you should be careful with the fixed widths and heights (because of the absolute positioning).

Place text to the bottom instead of right below the other text

1 Answers