I have 3 columns that extend to equal height. The problem is that they only seem to work on Google Chrome and don't work on Safari or FF at least. They also don't work on Chrome or Safari for iPad.
See them in action here
The funny thing is that on this Fiddle example I've prepared with exactly the same code (only changed the border for better visualisation) they seem to work on every browser.
Is there a way to fix this? Many thanks!
HTML
<div id="wrapper">
<div class="col">
<div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
<h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
<!-- CUSTOM LIST -->
<div class="custom-list info-box-inner-list">
<ul>
<li>Tuesday 31st December 2013</li>
<li>The 4* Holiday Inn Hotel</li>
<li>London WC1N 1HT,</li>
<li>pop, dance, disco, electronic</li>
</ul>
</div>
<!-- END CUSTOM LIST -->
<p>Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.LAST WORD</p>
<div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
</div>
</div>
<div class="col">
<div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
<h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
<!-- CUSTOM LIST -->
<div class="custom-list info-box-inner-list">
<ul>
<li>Tuesday 31st December 2013</li>
<li>The 4* Holiday Inn Hotel</li>
<li>London WC1N 1HT,</li>
<li>pop, dance, disco, electronic</li>
</ul>
</div>
<!-- END CUSTOM LIST -->
<p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..</p>
<div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
</div>
</div>
<div class="col">
<div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
<h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
<!-- CUSTOM LIST -->
<div class="custom-list info-box-inner-list">
<ul>
<li>Tuesday 31st December 2013</li>
<li>The 4* Holiday Inn Hotel</li>
<li>London WC1N 1HT,</li>
<li>pop, dance, disco, electronic</li>
</ul>
</div>
<!-- END CUSTOM LIST -->
<p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.</p>
<div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
</div>
</div>
</div>
CSS
.content > img {
vertical-align:top;
}
#wrapper {
height: 100%;
width: 100%;
margin: 20px auto;
display:table;
overflow: hidden;
}
#wrapper > .col {
display: table-cell;
width: 30.3%;
margin: 0 15px 3px;
background-color: #fff;
text-align: center;
position: relative;
height: 100%;
padding-bottom: 2px;
border:1px solid #000;
}
#wrapper > .col > .content {
padding:0 0 35px;
height:100%;
}
.content {
margin-bottom:30px;
position: relative;
}
.content > p {
vertical-align:top;
}
.content h3 {
font-size:1.375rem;
font-weight:400;
text-align:center;
margin-bottom: 20px;
padding: 25px 27px 0;
}
.content p {
text-align:left;
padding: 0 27px 30px;
}
.button.moreinfo {
margin-top: 5px;
margin-bottom: 0;
padding-top: 0.5rem;
padding-right: 0.3rem;
padding-bottom: 0.5rem;
padding-left: 0.3rem;
background-color: #2a2a2a;
font-size: 0.9rem;
color: #f39c12;
font-weight: 400 !important;
}
div.btn-align-bottom {
position:absolute;
bottom:50px;
left:0;
right:0;
}
.info-box {
margin-bottom:0;
margin-top: 15px;
}
.info-box img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.info-box-inner {
background: #FFF;
padding:25px 27px 35px;
display:inline-block;
overflow:hidden;
float:none;
min-height:270px;
text-align:center;
-moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
-webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
z-index:1;
}
.info-box-inner p {
text-align:left;
}
.info-box-inner h3 {
font-size:1.375rem;
font-weight:400;
text-align:center;
}