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:

alignment example

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?

hi.. You should take a look here. This might help you.http://stackoverflow.com/questions/2743989/vertically-aligning-divs — ba1ar, Mar 12 '14 at 06:39

score 1 · Answer 1 · answered Mar 12 '14 at 06:40

1

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

answered Mar 12 '14 at 06:40

Sajad Karuthedath

14,987
4
32
49

it doenst work if div heights are variable length.. see tb link http://jsfiddle.net/epwu7/2/ – Ritesh Chandora Mar 12 '14 at 06:43

score 1 · Accepted Answer · answered Mar 12 '14 at 06:52

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

answered Mar 12 '14 at 06:52

wishchaser

628
2
7
19

@Irina Note that according to **[spec](http://www.w3.org/TR/CSS2/visuren.html#propdef-position)**, the effect of `position: relative` on `table-cell` is **undefined**. Hence the absolutely positioned elements will be positioned relative to their nearest containing block, which is the *initial containing block* (the ``) in this example. Check the [demo](http://jsbin.com/bukaxiyo/1/) link on Firefox to verify that. – Hashem Qolami Mar 12 '14 at 11:33
@HashemQolami Hm. Thanks. In the whole page it still work for me without `position: relative` on table-cell (but I'm not sure why). – Irina Mar 12 '14 at 15:41

score 0 · Answer 3 · edited Mar 12 '14 at 06:47

0

DEMO

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

edited Mar 12 '14 at 06:47

The Hungry Dictator

3,444
5
37
53

answered Mar 12 '14 at 06:44

Sumit Pathak

671
1
6
25

Thanks a lot, but unfortunatelly if to add width in px to .table, and width in % to .cell, it doesn't works.. – Irina Mar 12 '14 at 07:00

score -1 · Answer 4 · answered Mar 12 '14 at 06:29

-1

use:

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

answered Mar 12 '14 at 06:29

Anubhav

7,138
5
21
33

Align on top and on bottom in the DIV

4 Answers4