how to make div in bottom inside the main div? [duplicate] - html

Question

This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
how to make div with class boxLinks = bottom in the main box = class = main-box?
my idea
this class main width 1200px;
this class main-box are 5 div, every div width 25%
.main-box {
width= "25%";
float= left;
}
<div class= "main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>
i want this div boxLinks in the last div,

Answer 1

You can use flexbox to do the work.
You have to set your main-box as flex.
then the boxLinks become a flex element, so with the properti align-self you can put it at the bottom.
You can fin a good tutorial on css-tricks
.main-box {
width: "25%";
float: left;
border: 1px solid #000;
width: 500px;
height: 400px;
display: flex;
}
.boxLinks {
flex: 0 1 100%;
height: 100px;
background: #000;
align-self: flex-end;/* this do the work */
}
<div class="main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>

Answer 2

Try this:
.main-box {
width= 25%;
float= left;
position:relative;
min-height:150px;
background:#000;
}
.boxLinks{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}
<div class= "main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>

Answer 3

It is pretty simple. You can use position: relative on 'main-box' and position: absolute, bottom:0 on 'boxLinks'.
Working example on jsFiddle.
.main {
display: flex;
}
.main-box {
width: 25%;
height: 100px;
float: left;
position: relative;
background-color: #f00;
}
.boxLinks {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background-color: #0f0;
}
<div class="main">
<div class="main-box">
<div class="boxImg"></div>
<div class="boxTital"></div>
<div class="boxLinks">
<button> PRESS </button>
</div>
</div>
</div>