Button alignment will not sit where i tell it to

Question

I have 3 boxes with roll over effects on a page, when someone mouses over the box it changes the content from a paragraph to a unordered list with a 'view more' button.

The problem is each box has a different amount of items in the list and the button is aligning at the end of the list where i am trying to align it to the very bottom of the box.

I have tried a few suggestions that i found looking through these forums but still cannot make it work. Could someone point me in the right direct? am i missing something?

The page is below, ideally i would like to align all the buttons to the bottom, in the same sort of place as the button appears in the first box.

http://wpdev.quadris.co.uk/what-we-do/

The code for the bit im working with is as follows

	.box {

  cursor: pointer;
  height: 340px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.box .fa {
    position: relative;
    margin-top: 40%;
    left: 43%;
    font-size: 48px;
}

.box h2 {
      text-align: center;
  position: absolute;
  font-size: 24px;
  left: 5%;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box p{
      text-align: center;
    position: relative;
    top: 30%;
    padding: 3%;
    padding-top: 0;
}
.box .overbox p {
    text-align: center;
    color: #fff;
    font-size: 16px;
}
.box .overbox {
  background-color: #424545;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 100%;
  height: 340px;
    padding: 30px 20px;

}

.box:hover .overbox { opacity: 1; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 16px;
  text-transform: none;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  color:#fff;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
  color: #fff;
}

.box .overbox  .btn-primary {
    position: relative;
	bottom: 0;
    background-color: #9e3039;
    color: #fff;
    border-style: none;

} 
.box .overbox .btn-primary a, a:hover {
    color: #fff;
}

<div class="box"> <h2>Managed IT Solutions</h2>
    
<p>No matter what your IT requirement is, we can help.
Whether you are looking for a fully managed IT service or one tailored to supplement your internal team, we have a solution for you.
</p>
<i class="fa fa-gg"></i>
  <div class="overbox">
    <div class="title overtext"> 
		<ul>
			<li>Tailored IT Support</li>
			<li>Service Desk</li>
			<li>Networking Monitoring</li>
			<li>Managed Disaster Recovery</li>
			<li>IT PRocurement</li>
			<li>Managed Security</li>
			<li>Co-Location Services</li>
			<li>Hosted Services</li>
			<li>Domain Management</li>
			<li>Security Vulnerability Scanning</li>
		</ul>
		    <div class="tagline overtext"><button type="button" class="btn btn-primary btn-lg btn-block"><a href="#">Find Out More</a></button> </div>

	</div>
  </div>
</div>

Any help would be much appreciated.

Thanks,

PhilB

Answer 1

see code snippet below.

for the button to stay at the very bottom of the .overbox you need it to stay depending on the overbox .so, in HTML, move the div that contains the button out of the .overtext and put it as a direct child of overbox .

then set position: absolute to the div that contains the button ( tagline ) and bottom:0 or bottom:5px as i have set in the below snippet ( so it's not exactly at the bottom )

hope it helps.

.box {

  cursor: pointer;
  height: 340px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.box .fa {
    position: relative;
    margin-top: 40%;
    left: 43%;
    font-size: 48px;
}

.box h2 {
      text-align: center;
  position: absolute;
  font-size: 24px;
  left: 5%;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box p{
      text-align: center;
    position: relative;
    top: 30%;
    padding: 3%;
    padding-top: 0;
}
.box .overbox p {
    text-align: center;
    color: #fff;
    font-size: 16px;
}
.box .overbox {
  background-color: #424545;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 100%;
  height: 340px;
    padding: 30px 20px 80px;
  box-sizing:border-box;

}

.box:hover .overbox { opacity: 1; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);

}

.box .title {
  font-size: 16px;
  text-transform: none;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  color:#fff;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
  color: #fff;
}

.box .overbox .tagline {
position:absolute;
	bottom: 5px;
    background-color: #9e3039;
    color: #fff;
    border-style: none;

} 
.box .overbox .tagline .btn-primary{
     background-color: #9e3039;
  }
.box .overbox .btn-primary a, a:hover {
    color: #fff;
}
 

<div class="box"> <h2>Managed IT Solutions</h2>
    
<p>No matter what your IT requirement is, we can help.
Whether you are looking for a fully managed IT service or one tailored to supplement your internal team, we have a solution for you.
</p>
<i class="fa fa-gg"></i>
  <div class="overbox">
    <div class="title overtext"> 
		<ul>
			<li>Tailored IT Support</li>
			<li>Service Desk</li>
			<li>Networking Monitoring</li>
			<li>Managed Disaster Recovery</li>
			<li>IT PRocurement</li>
			<li>Managed Security</li>
			<li>Co-Location Services</li>
			<li>Hosted Services</li>
			<li>Domain Management</li>
			<li>Security Vulnerability Scanning</li>
		</ul>
		    

	</div>
    <div class="tagline overtext"><button type="button" class="btn btn-primary btn-lg btn-block"><a href="#">Find Out More</a></button> </div>
  </div>
</div>


<div class="box"> <h2>Managed IT Solutions</h2>
    
<p>No matter what your IT requirement is, we can help.
Whether you are looking for a fully managed IT service or one tailored to supplement your internal team, we have a solution for you.
</p>
<i class="fa fa-gg"></i>
  <div class="overbox">
    <div class="title overtext"> 
		<ul>
			<li>Tailored IT Support</li>
			<li>Service Desk</li>
			<li>Networking Monitoring</li>
			<li>Managed Disaster Recovery</li>
			<li>IT PRocurement</li>
			<li>Managed Security</li>
			<li>Co-Location Services</li>
			<li>Hosted Services</li>
			<li>Domain Management</li>
			<li>Security Vulnerability Scanning</li>
          <li>Security Vulnerability Scanning</li>
          <li>Security Vulnerability Scanning</li>
          <li>Security Vulnerability Scanning</li>
       
		</ul>
		   

	</div>
     <div class="tagline overtext"><button type="button" class="btn btn-primary btn-lg btn-block"><a href="#">Find Out More</a></button> </div>
  </div>
</div>

<div class="box"> <h2>Managed IT Solutions</h2>
    
<p>No matter what your IT requirement is, we can help.
Whether you are looking for a fully managed IT service or one tailored to supplement your internal team, we have a solution for you.
</p>
<i class="fa fa-gg"></i>
  <div class="overbox">
    <div class="title overtext"> 
		<ul>
			<li>Tailored IT Support</li>
			<li>Service Desk</li>
			<li>Networking Monitoring</li>
			<li>Managed Disaster Recovery</li>

		</ul>
		    

	</div>
    <div class="tagline overtext"><button type="button" class="btn btn-primary btn-lg btn-block"><a href="#">Find Out More</a></button> </div>
  </div>
</div>

Answer 2

Set height:90% to your class .text thus this places your button at bottom of .overbox.

.box .title {
    font-size: 16px;
    text-transform: none;
    opacity: 0;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
    height: 90%; /*Add this*/
}