Absolute position element on equal height columns - how? - css

Question

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:
<div class="wrapper">
<div class="inner">
<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>
<p>Some text here yeah :)</p>
<a class="link" href="#">I should be absolute.</a>
</div>
</div>
</div>
THE CSS:
.wrapper {
overflow: hidden;
position: relative;
}
/*added */
.inner {
width: 100%;
display: table;
}
.column {
display: table-cell;
width: 50%;
vertical-align: top;
background-color:red;
}
.column img {
max-width:100%;
display: block;
}
.info {
background-color: blue;
padding-bottom: 25px;
}
.link {
display: block;
position: absolute;
left: 50%;
bottom: 3%;
color: yellow;
}
Fiddle to play:
Here's the try with table-cell; and a relative inner container:
http://jsfiddle.net/BuuFv/98/
TRIES AND FRUSTRATIONS:
1) - Display table
For equal heights I can't pull this out, due to FF issues.
Tried with an extra relative parent container
But left image doesn't shrink according to it's container on FF.
Tried giving height: 100%
http://davidwalsh.name/table-cell-position-absolute
But didn't work either, the image doesn't shrink or expands using max-width;
2 - Huge positive padding and negative margin values
Will not work, because the absolute positioned element will not stay in place.
3 - Faux Columns
Seems to be of any help, due to the fact that, we are not playing with solid background colours, and we have an image on the left column instead.
A picture:
Any help, please?

Answer 1

1)
On this case, adding an extra relative container with position relative attribute (.inner), did the trick.
2)
The fact that the image didn't shrink or grow on FF was because it wasn't considering the max-width declaration as it should.
Fix:
.inner {
width: 100%;
display: table;
table-layout:fixed; /* <<-- ADD */
}
the table-layout fixed algorithm made Firefox recognize the max-width in the cell and this let the image shrink.
Credits on this solution should be shared with Paul O'B.

Answer 2

Here is my take on it http://jsfiddle.net/E6UDD/
So basically, uncoment padding and negative margin hack, and add the height of the column to be the same amount.
Then, add relative positioning to the .column.
Then, position of the absolute positioned link should be top: 50% to have it at the very bottom, or 44% to mimic the 3% you originally indended.

Answer 3

DEMO
.wrapper {
position:relative;
overflow: hidden;
white-space:nowrap;
outline:1px solid red;
height:auto;
}
.column {
position:relative;
display:inline-block;
vertical-align:top;
background-color:red;
width:50%;
}
.column img {
max-width:100%;
min-width:30px;
min-height:20px;
}
.info {
position:absolute;
bottom:0;
top:0;
background-color: blue;
}
.link {
clear:left;
display: block;
position: absolute;
bottom: 3%;
color: yellow;
}

Answer 4

http://jsfiddle.net/BuuFv/75/
You can try changing the link from absolute positioned to another table-cell. Not 100% on your use case but it seems to accomplish what you are asking.
.link {
height:100px;
display:table-cell;
vertical-align:bottom;
color: yellow;
}