Align button at the bottom of div using CSS

Question

I want to align my button at the bottom right corner of my div. How can I do that?

enter image description here

Current css of div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

Kokos · Accepted Answer · 2015-04-16T06:35:05.957

292

You can use position:absolute; to absolutely position an element within a parent div. When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.

To make the content div positioned, all position values that aren't static will work, but relative is the easiest since it doesn't change the divs positioning by itself.

So add position:relative; to the content div, remove the float from the button and add the following css to the button:

position: absolute;
right:    0;
bottom:   0;

edited Apr 16 '15 at 06:35

answered Apr 28 '11 at 10:36

Kokos

9,051
5
27
44

It not working cause I also have a footer at the bottom. So this places my button at the bottom-right corner of page not the div. – Harry Joy Apr 28 '11 at 10:41
1

@Harry Joy: Did you also apply `position: relative` to the element that's containing your form+button? – thirtydot Apr 28 '11 at 10:43
1

@Harry Joy: Then it should be relative to that `div`, not the page. If the footer is also contained in this `div`, maybe they just appear to be the same thing. If you know the height of your footer, on the button you can use `bottom: HEIGHT_OF_FOOTERpx`. – thirtydot Apr 28 '11 at 10:45
@thirtydot: the footer is not inside div. – Harry Joy Apr 28 '11 at 10:49
1

@Harry Joy: Then there's too much confusion here. You should post your HTML/CSS as a [jsFiddle test case](http://jsfiddle.net/). – thirtydot Apr 28 '11 at 10:50
1

@thirtydot: Got it working. Thnx. missplaced the position:relative. Added it in wrong div. – Harry Joy Apr 28 '11 at 10:53
Kokos answer was right on the spot. Many people have mentioned the position:absolute; on other posts, but no one I have seen mentioned the importance of the parent element position: relative; thank you, that has been bothering me for months! – Loran Nov 30 '12 at 21:27
3

Really I just have to make a comment and really point out how happy I am to have found this solution. This has been bugging me for years! – K. Kilian Lindberg Aug 22 '13 at 17:24
Is there any reason why this might not work in a Bootstrap modal? I added style="position:absolute;right:0;bottom:0;" to the button and style="position:relative;" to the div containing the button yet the button appears to be floating to the top ... had to make bottom like a -57 to get it close – user3071434 Jan 18 '19 at 18:18

score 64 · Answer 2 · edited Sep 28 '17 at 23:32

CSS3 flexbox can also be used to align button at the bottom of parent element.

Required HTML:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

Necessary CSS:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Screenshot:

Useful Resources:

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}

<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

score 18 · Answer 3 · answered Jan 04 '14 at 20:10

18

Parent container has to have this:

position: relative;

Button itself has to have this:

position: relative;
bottom: 20px;
right: 20px;

or whatever you like

answered Jan 04 '14 at 20:10

Aron

207
2
2

3

Note that this answer is incorrect. With `position:relative` the button will be moved from its original position instead of based on the parent. – Kokos Jun 27 '17 at 13:18
4

You need to use `position: absolute` in order for it from the bottom-right. – CaptainBli Oct 24 '18 at 20:46
1

The parent component must have the relative tag and button should have an absolute tag. Thanks @CaptainBli. – maverick Feb 23 '22 at 11:08

score 4 · Answer 4 · answered Apr 04 '21 at 21:35

4

I have solved this using position fixed:

.button-corner {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

answered Apr 04 '21 at 21:35

Leandro Hernández Mira

768
9
23

score 0 · Answer 5 · answered Apr 28 '23 at 13:29

0

In my case:

position: sticky;
bottom: 0;
right: 0;

answered Apr 28 '23 at 13:29

Husam Ebish

4,893
2
22
38

score -29 · Answer 6 · edited Mar 31 '17 at 15:41

-29

Goes to the right and can be used the same way for the left

.yourComponent
{
   float: right;
   bottom: 0;
}

edited Mar 31 '17 at 15:41

Wouter Vanherck

2,070
3
27
41

answered Nov 29 '12 at 02:11

BehranG BinA

504
1
5
9

5

This only aligns your button to the right. Not the bottom right. – Ruben Jan 15 '13 at 23:33
float: right will align your button to the right but bottom property will not work, bottom only works with position other than static – Kunal Tyagi Nov 23 '21 at 08:09

Align button at the bottom of div using CSS

6 Answers6

Linked