Here's what I can't do by any means, using only CSS:

Columns should have equal heights. And, on a given column, a absolute positioned element should be present relative to that column:

The HTML:

Code HTML4Strict:
<div class="wrapper">
    <div class="column">
        <img src="http://www.english3.com/wp-content/uploads/2013/05/DFI-Logo-300px-X-200px.png"/>
    </div>
    <div class="column info">
        <p>Some text here yeah :).</p>
        <p>Some text here yeah :)</p>
        <a class="link" href="#">I should be absolute.</a>
    </div>
</div>

THE CSS:

Code CSS:
.wrapper {
    overflow: hidden;
}
.column {
    float: left;
    background-color:red;
    width:50%;
    /*padding-bottom:900px;
    margin-bottom: -900px;*/
}
 
.column img {
  max-width:100%;  
 }
 
.info {
    position:relative;
    background-color: blue;
}
 
.link {
    clear:left;
    display: block;
    position: absolute;
    bottom: 3%;
    color: yellow;
}

Fiddle to play:

http://jsfiddle.net/BuuFv/71/

TRIES AND FRUSTRATIONS:

Display table for equal heights is NOT an option because if has issues on latest FF. And regardless the tries on given height: 100%; as suggested here:

http://davidwalsh.name/table-cell-position-absolute
Doesn't seem to do the trick.

Or using a relative container, doesn't seem to make the trick either.

As far as I can see, Table cell will always give us a know firefox position absolute inside a relative container issue/bug.

Using huge padding and margin values on columns will NOT work either, because the absolute position element will not work properly.

Faux Columns will not work either, because we wish to have an image on one of the columns.

Here's an image of the intended result:
equal_height1.png

Any help, please?