Align element to bottom of container that uses display: table - html

Question

I have 3 boxes which need to be the same height with varying content. I am using display: table to achieve this. I need to vertically align the button to the bottom of the container. The button width could also change. I was not able to successfully get vertical-align: bottom to work.
http://codepen.io/simply-simpy/pen/kBaHt
<div id="cta-3-col" class="cta-3-col">
<div class="container">
<div class="cta">
<figure>
<img src="http://lorempixel.com/200/100/" alt="">
<figcaption>
<h2>CTA 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
</figcaption>
</figure>
Follow<i></i>
</div>
<div class="cta">
<figure>
<img src="http://lorempixel.com/200/100/" alt="">
<figcaption>
<h2>CTA 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua sed do edunt ut labore et dolore magna aliqua. </p>
</figcaption>
</figure>
Partner With Us<i></i>
</div>
<div class="cta">
<figure>
<img src="http://lorempixel.com/200/100/" alt="">
<figcaption>
<h2>CTA 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</figcaption>
</figure>
Learn<i></i>
</div>
</div>
</div>
.cta {
background: #fff;
display: table-cell;
width: 270px;
padding: 0 0 30px;
}
.cta-3-col {
background: gray;
text-align: center;
border-spacing: 10px;
}
.container {
display: table;
width: 1000px;
margin: 0 auto;
}
.btn {
background: blue;
color: #fff;
padding: 10px;
}

Answer 1

You just have to change/add some CSS properties to your existing classes without adding extra markup:
http://codepen.io/anon/pen/rFmxa
CSS:
.cta {
background: #fff;
display: table-cell;
width: 270px;
/*padding: 0 0 30px;*/
padding: 0 0 4em;
position: relative;
}
.cta-3-col {
background: gray;
text-align: center;
border-spacing: 10px;
}
.container {
display: table;
width: 1000px;
margin: 0 auto;
}
.btn {
background: blue;
color: #fff;
padding: 10px;
position: absolute;
bottom: 0;
margin-bottom: 1em;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}

Answer 2

look modified code without complex transform-translate properties wich will work in all browsers including ols IE!
advantages over other methods: efficient, fast, cross-browser, easy!
Codepen YourSolution
Modified css
.cta {
background: #fff;
display: table-cell;
width: 270px;
padding: 0 0 30px;
position:relative;
}
.cta-3-col {
background: gray;
text-align: center;
border-spacing: 10px;
.container {
display: table;
width: 1000px;
margin: 0 auto;
}
}
p {
margin:10px 0px 40px 0px;
}
a.btn {
position: absolute;
bottom: 10px;
left: 0;
right: 0px;
width: 64px;
margin: auto;
background: blue;
color: #fff;
padding: 10px;
}

Answer 3

Here's an updated CodePen.
The bulk of the change was adding a position:relative; modifier to the .cta class and then giving the following rules to the class .btn:
position:absolute;
bottom:5px;
left:50%;
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform: translateX(-50%);
That should take care of the problem for you.

Answer 4

.cta {
background: #fff;
display: table-cell;
width: 270px;
padding: 0 0 40px;
position:relative;
}
.btn {
background: blue;
color: #fff;
padding: 10px;
position:absolute;
left:50%;
bottom:0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}

Answer 5

You just need to add below additional css and it will display your html as you requested:
- .cta {position:relative;}
- .btn {position:absolute;left:45%;bottom:0px;}