Align Div at bottom on main Div

Question

I have two divs, one inside the other and I would like the small div to be aligned at the buttom of the main div.

Here's my code so far. Currently, the button is at the top of main div, instead I want it positioned at the bottom. Any help would be appreciated.

.vertical_banner {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
}

#bottom_link{
 vertical-align: bottom;
}

Here's how I've been trying to use it, but as you can see I'm still new to CSS :)

<div class="vertical_banner">
    <div id="bottom_link">
         <input type="submit" value="Continue">
       </div>
</div>

score 65 · Accepted Answer · edited Jul 15 '17 at 13:15

65

Modify your CSS like this:

.vertical_banner {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
    position:relative;
}

#bottom_link{
   position:absolute;                  /* added */
   bottom:0;                           /* added */
   left:0;                           /* added */
}

<div class="vertical_banner">
    <div id="bottom_link">
         <input type="submit" value="Continue">
       </div>
</div>

edited Jul 15 '17 at 13:15

Michal Splinder

27
4

answered Sep 04 '11 at 19:51

Sarfraz

377,238
77
533
578

2

Thanks, I still find this quite useful even after over a year on. Nice, work :) – Helen Neely Nov 28 '12 at 11:53

score 10 · Answer 2 · answered Sep 04 '11 at 19:53

10

Give your parent div position: relative, then give your child div position: absolute, this will absolute position the div inside of its parent, then you can give the child bottom: 0px;

See example here:

http://jsfiddle.net/PGMqs/1/

answered Sep 04 '11 at 19:53

mynameiscoffey

15,244
5
33
45

score 5 · Answer 3 · answered Sep 04 '11 at 19:52

This isn't really possible in HTML unless you use absolute positioning or javascript. So one solution would be to give this CSS to #bottom_link:

#bottom_link {
    position:absolute;
    bottom:0;
}

Otherwise you'd have to use some javascript. Here's a jQuery block that should do the trick, depending on the simplicity of the page.

$('#bottom_link').css({
    position: 'relative',
    top: $(this).parent().height() - $(this).height()
});

score 3 · Answer 4 · answered Sep 04 '11 at 19:52

3

I guess you'll need absolute position

.vertical_banner {position:relative;}
#bottom_link{position:absolute; bottom:0;}

answered Sep 04 '11 at 19:52

Simon Arnold

15,849
7
67
85

score 1 · Answer 5 · edited Feb 06 '15 at 03:29

1

Please try this:

#b {
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: inline-flex;

-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
flex-flow: row nowrap;

-webkit-align-items: flex-end;
-moz-align-items: flex-end;
align-items: flex-end;}

Here's a JSFiddle demo: http://jsfiddle.net/rudiedirkx/7FGKN/.

edited Feb 06 '15 at 03:29

hichris123

10,145
15
56
70

answered Feb 05 '15 at 17:56

Humberto Rodrigues

159
1
5

1

When providing answers, please take the time to explain why your answer has been provided, and why it should solve the problem. – Mike Rockétt Feb 05 '15 at 18:43

score 1 · Answer 6 · answered Sep 27 '21 at 23:58

1

Another way to do it is to add a margin-top: auto and margin-bottom: 0. This tells the margin top to fill in the missing space.

answered Sep 27 '21 at 23:58

beeeliu

99
1
1
6

2

Thanks @beeeliu for your input. Hopefully someone else will find this your suggest useful. – Helen Neely Sep 28 '21 at 13:20

Align Div at bottom on main Div

6 Answers6

Linked