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-16 06:35:05Z

296

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, 2015 at 6:35

answered Apr 28, 2011 at 10:36

Kokos

9,1715 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

thirtydot Over a year ago

@Harry Joy: Did you also apply position: relative to the element that's containing your form+button?

thirtydot Over a year ago

@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 Over a year ago

@Harry Joy: Then there's too much confusion here. You should post your HTML/CSS as a jsFiddle test case.

Harry Joy Over a year ago

@thirtydot: Got it working. Thnx. missplaced the position:relative. Added it in wrong div.

K. Kilian Lindberg Over a year ago

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!

|

Graham · Accepted Answer · 2017-09-28 23:32:37Z

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>

Aron · Accepted Answer · 2014-01-04 20:10:53Z

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 4, 2014 at 20:10

Aron

2072 silver badges2 bronze badges

3 Comments

Kokos Over a year ago

Note that this answer is incorrect. With position:relative the button will be moved from its original position instead of based on the parent.

CaptainBli Over a year ago

You need to use position: absolute in order for it from the bottom-right.

maverick Over a year ago

The parent component must have the relative tag and button should have an absolute tag. Thanks @CaptainBli.

Leandro Hernández Mira · Accepted Answer · 2021-04-04 21:35:34Z

5

I have solved this using position fixed:

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

answered Apr 4, 2021 at 21:35

Leandro Hernández Mira

8471 gold badge14 silver badges26 bronze badges

Comments

Husam Ebish · Accepted Answer · 2023-04-28 13:29:04Z

1

In my case:

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

answered Apr 28, 2023 at 13:29

Husam Ebish

7,2124 gold badges27 silver badges48 bronze badges

Comments

Wouter Vanherck · Accepted Answer · 2017-03-31 15:41:48Z

-29

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

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

edited Mar 31, 2017 at 15:41

Wouter Vanherck

2,3873 gold badges34 silver badges48 bronze badges

answered Nov 29, 2012 at 2:11

BehranG BinA

5121 gold badge5 silver badges9 bronze badges

2 Comments

Ruben Over a year ago

This only aligns your button to the right. Not the bottom right.

Kunal Tyagi Over a year ago

float: right will align your button to the right but bottom property will not work, bottom only works with position other than static

Collectives™ on Stack Overflow

Align button at the bottom of div using CSS

6 Answers 6

9 Comments

Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related