Align Buttons In Div To Bottom - html

Question

I have a main div with CSS:
.border {
border-radius: 25px;
border: 8px solid #2C3E50;
padding: 50px;
width: 500px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
And two buttons, side by side, inside the div, with CSS to make it animate on hover/press. How would I make the buttons to be at the bottom of the div, no matter of what the content is in the div? Position: absolute, doesn't work for me.

Answer 1

Try position: absolute or relative and then alter the bottom and right properties.
Also, have you checked to make sure that no other styles are overwriting your preferred styles? Chrome's developer tools are an awesome way to find this out.

Answer 2

For html:
<div id="wrapper">
<button></button>
</div>
You can apply style:
#wrapper {
position: relative;
}
#wrapper > button {
position: absolute;
bottom: 0;
}
To place the <button> element at the bottom of the wrapper <div>. Take note that you must declare position: relative or position: absolute on the containing element ( the wrapper ) for position: absolute to place a child element (the button) with respect to its bottom.

Answer 3

Try this
.border {
border-radius: 25px;
border: 8px solid #2C3E50;
padding: 50px;
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.inner-border-normal {
float: left;
}
.inner-border-bottom {
position: absolute;
bottom: 50px;
}
.button {
width: 100px;
height: 32px;
border: 1px solid #CCCCCC;
border-radius: 4px;
background: #F2F2F2;
cursor: pointer;
}
<div class="border">
<div class="inner-border-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id erat interdum ex dapibus sodales nec id nibh. Sed egestas bibendum erat quis ultricies. Ut auctor iaculis odio quis tempor. In maximus nisi et ex consectetur scelerisque. Nam et nunc sit amet massa faucibus commodo. Etiam at tortor nisl. Integer at justo sit amet ex ornare rutrum a sed felis. Mauris eu risus dolor. Curabitur non ullamcorper lacus. Curabitur ultricies aliquet ex, non maximus erat convallis eget. Nulla pretium ex quis commodo tempus. Nunc non vestibulum neque, vitae venenatis lorem. Nunc eget maximus ante. Sed aliquam ac arcu sed pharetra.</div>
<div class="inner-border-bottom">
<input type="button" class="button" value="Press">
<input type="button" class="button" value="Press">
</div>
</div>