Equal height columns only work on Chrome

Question

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;
}

Answer 1

because you use absolute position and because parent seems to have no relative position, bottom:0; can turn out to be bottom of html or closest parent that has a position like : relative, absolute or fixed.

Beside , Firefox do not handle table display and position : relative; together.

So the fix, would be unfortunately, to wrap your wrapper (displayed as table) inside a wrapper that can receive : position:relative; wich will extend with .wrapper and give you a bottom area reachable by coordonates.

Your fiddle updated : http://jsfiddle.net/AU5G3/1/

Notice dropping left and right coordonates in CSS wich are calculated from main wrapper and not the col area .