I want to align my button at the bottom right corner of my div. How can I do that?
Current css of div:
float: right; width: 83%; margin-right: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height:625px; overflow:auto;5 Answers
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;CSS3 flexbox can also be used to align button at the bottom of parent element.
Required HTML:
<div> <div> <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> <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> <button type="button">Click</button> </div>
</div>Parent container has to have this:
position: relative;Button itself has to have this:
position: relative;
bottom: 20px;
right: 20px;or whatever you like
3I have solved this using position fixed:
.button-corner { position: fixed; bottom: 20px; right: 20px;
}Goes to the right and can be used the same way for the left
.yourComponent
{ float: right; bottom: 0;
}
