Align on top and on bottom in the DIV

Question

I have DIVs with some text and a button in them. I need to:

• align the button on the bottom of DIV
• align the text on the top of DIV

Here is an image of what I want it to look like:

The code I have:

HTML:

<div class="table">
    <div class="cell">
        <p>Some text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
    <div class="cell">
        <p>The big one text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
    <div class="cell">
        <p>Some small text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
</div>

CSS:

.table {
    display: table;
}
.cell {
    float: none;
    display: table-cell;
    height: auto;
}
.cell .btn {
    vertical-align: bottom;
}

Any ideas how to do this?

Answer 1

.table {
    display: table;
}
.cell {
    display: table-cell;
    height: auto;
    border:1px solid black;
    padding-bottom:40px;
    position:relative;
}
.cell .btn {
    vertical-align: bottom;
    position:absolute;
    bottom:0px;
}

DEMO

try this. adjust the padding according to your button height

Answer 2

DEMO

   .cell p{
    vertical-align: top;
    display:inline;
}

.cell .btn {
    display:block;
    vertical-align: bottom;
}

Note:i have added two display properties along with vertical-alignment,because p always starts in a newline,so inorder for the vertcal-alignment:top to work you need to add display:inline for the p element

Answer 3

DEMO

try this one,this is the simplest just copy and paste replace your code

Answer 4

use:

.cell .btn {
    position: absolute;
    bottom: 0px;
}