146

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;

6 Answers 6

294

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;
9
  • 1
    @Harry Joy: Did you also apply position: relative to the element that's containing your form+button?
    – thirtydot
    Commented Apr 28, 2011 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
    Commented Apr 28, 2011 at 10:45
  • 1
    @Harry Joy: Then there's too much confusion here. You should post your HTML/CSS as a jsFiddle test case.
    – thirtydot
    Commented Apr 28, 2011 at 10:50
  • 1
    @thirtydot: Got it working. Thnx. missplaced the position:relative. Added it in wrong div.
    – Harry Joy
    Commented Apr 28, 2011 at 10:53
  • 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! Commented Aug 22, 2013 at 17:24
68

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:

Output Image

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>

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

3
  • 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
    Commented Jun 27, 2017 at 13:18
  • 4
    You need to use position: absolute in order for it from the bottom-right.
    – CaptainBli
    Commented Oct 24, 2018 at 20:46
  • 1
    The parent component must have the relative tag and button should have an absolute tag. Thanks @CaptainBli.
    – maverick
    Commented Feb 23, 2022 at 11:08
5

I have solved this using position fixed:

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

In my case:

position: sticky;
bottom: 0;
right: 0;
-29

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

.yourComponent
{
   float: right;
   bottom: 0;
}
2
  • 6
    This only aligns your button to the right. Not the bottom right.
    – Ruben
    Commented Jan 15, 2013 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 Commented Nov 23, 2021 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.