1

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,

Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
Anas Apples
  • 13
  • 2

3 Answers3

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>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
0

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>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Levente Gabos
  • 350
  • 1
  • 5
0

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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • thanks, this code come with me but i have some problem with button is not come center in div boxLinks, i use text-align: center; and margin: 0; – Anas Apples Jan 24 '20 at 15:26