How to make all buttons at equal distance from div - html

Question

This is what I have presently -
.box{
background-color: #e61a39;
width: 25%;
float:left;
margin: 0px;
text-align: center;
min-height: 380px;
}
#container{
width: 90%;
margin: auto;
}
<section id="container">
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
<button>Discover Pizza</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-3.png">
<h1>Your Nearest Store</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Find Pizza Restaurants</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-object.png">
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-objectcopy-6.png">
<h1>Catering</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
</section>
This code makes my buttons uneven. What can I do so that all the buttons are at the same distance from the bottom of the box?

Answer 1

Use position css properties.
.box{
background-color: #e61a39;
width: 25%;
float:left;
margin: 0px;
text-align: center;
min-height: 380px;
position:relative;
}
button{
position:absolute;
bottom: 10px;
left:25%;
right:25%;
}
#container{
width: 90%;
margin: auto;
}
<section id="container">
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
<button>Discover Pizza</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-3.png">
<h1>Your Nearest Store</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Find Pizza Restaurants</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-object.png">
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-objectcopy-6.png">
<h1>Catering</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
</section>

Answer 2

This is one way to do that
.box{
background-color: #e61a39;
text-align: center;
min-height: 380px;
display: flex;
flex-direction: column;
}
.box .content {
flex-grow: 1;
}
.box .button-wrapper {
height: 40px;
}
#container{
width: 90%;
display: flex;
justify-content: center;
}
<section id="container">
<div class="box">
<div class="content">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
</div>
<div class="button-wrapper">
<button>Discover Pizza</button>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
</div>
<div class="button-wrapper">
<button>Discover Pizza</button>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
</div>
<div class="button-wrapper">
<button>Discover Pizza</button>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
</div>
<div class="button-wrapper">
<button>Discover Pizza</button>
</div>
</div>
</section>
I used here flexbox (doesn't support ie10 and down).
This is a flexible way to do that because it's not absolute and doesn't depend on the height of the div above.
We define the height of button-wrapper and says to the 'content' div to have all of the rest of the 'box'.