How can I position these buttons at the bottom of their container? - html

Question

I've made a site that has a section containing a background image. I've added two buttons (<a> elements) to it and I want to position them to the bottom center of the section. Is that possible without relative/absolute positioning?
If, so, how please?
.main-section {
background-image: url('../IMG/main-section-logo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80vh;
}
.main-section:hover,:focus {
transform:scale(1.015);
transition: 1s ease;
}
.main-section:not(:hover) {
transform:scale(1);
transition: 1s ease;
}
.buttons {
text-align: Center;
text-decoration: none;
}
.btn-red {
color: white;
border: 1px solid red;
padding: 1.3em 6.2em;
}
.btn-white {
color: red;
border: 1px solid white;
padding: 1.3em 5em;
}
<section class="main-section">
<div class="container">
<div class="buttons">
BUY NOW
WATCH TRAILER
</div>
</div>
</section>

Answer 1

Solution
By using flexbox
.container must occupy the entire verticle space by using height: 100%
Add flexbox set of properties on .container
.main-section .container {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
Apply auto top margin to .buttons, which will automatically extend its specified margin to occupy the extra space in the flex container
.main-section {
background-image: url('../IMG/main-section-logo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80vh;
}
.main-section:hover,:focus {
transform:scale(1.015);
transition: 1s ease;
}
.main-section:not(:hover) {
transform:scale(1);
transition: 1s ease;
}
.main-section .container {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.buttons {
margin-top: auto;
text-align: Center;
text-decoration: none;
}
.btn-red {
color: white;
border: 1px solid red;
padding: 1.3em 6.2em;
}
.btn-white {
color: red;
border: 1px solid white;
padding: 1.3em 5em;
}
<section class="main-section">
<div class="container">
<div class="buttons">
BUY NOW
WATCH TRAILER
</div>
</div>
</section>

Answer 2

Yes, you can do so using flexbox.
Try the code below
.buttons {
display: flex;
align-items: flex-end;
justify-content: center;
}
This should hopefully solve your problem.
Some resources to learn Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com

Answer 3

What if you use flexbox on .main-section :
display: block;
Or
display: flex;
flex-direction: column;
Take a look at that https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Is it ok for you with flexbox?
Axel,

Answer 4

Have a look at place-items: end;
*{box-sizing: border-box;}
.main-section {
background-image: url('../IMG/main-section-logo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80vh;
}
.main-section:hover,:focus {
transform:scale(1.015);
transition: 1s ease;
}
.main-section:not(:hover) {
transform:scale(1);
transition: 1s ease;
}
.buttons {
text-align: Center;
text-decoration: none;
width: 100%;/*Add this to get the elements centered*/
}
.btn-red {
color: white;
border: 1px solid red;
padding: 1.3em 6.2em;
}
.btn-white {
color: red;
border: 1px solid white;
padding: 1.3em 5em;
}
/*have a look # place-items: end;*/
.container{
height: 90vh;
display: grid;
place-items: end;
}
<section class="main-section">
<div class="container">
<div class="buttons">
BUY NOW
WATCH TRAILER
</div>
</div>
</section>

Answer 5

you can try it
.buttons{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
}