Firefox can't handle absolute positioning in "display: table-cell"?

Question

I needed two columns of the same height, so display: table is used. So far so good.

Then I needed links for alignment in the database of table cells, so I went for absolute positioning.

It looks great, except for Firefox, where links are not limited to "position: relative" cells. Is there a way to trick Firefox into displaying correctly?

Demo: http://jsfiddle.net/andy_lamb/C7qpX/

HTML:

<div id="equal_cols"> <div class="largeleft"> <img style="padding: 5px; margin: 10px; float: right; border: 1px solid #ccc;" src="images/some_img.jpg" width="205" height="126" alt="image" /> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet.</p> <div class="alignlink"><a class="greybg" href="#">Read more</a></div> </div> <div class="col10px"></div> <div class="smallright"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p> <div class="alignlink"><a class="greybg" href="#">Read more</a></div> </div> </div> 

CSS

 a.greybg { padding: 3px; background: #464646; color: #ffffff; } p { padding: 10px 20px; margin: 0; font-size: 0.875em; } div.alignlink { position: absolute; bottom: 10px; right: 10px; margin: 0; padding: 0; } .equal_cols { display: table; width: 798px; } .largeleft { display: table-cell; width: 500px; border: 1px solid #ccc; position: relative; padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/ } .col10px { display: table-cell; position: relative; width: 10px; } .smallright { display: table-cell; width: 288px; border: 1px solid #ccc; position: relative; padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/ } 

Besides creating an HTML table, I can't think of that. This should be possible with CSS ...

Answer 1

By adding an extra inner shell and using some JS, you can achieve this: http://jsfiddle.net/David_Knowles/wyTga/

 // This clean plugin layout provieds typical jQuery syntax such as $("element").plugin() or $.plugin("element") (function($) { if (!$.equalHeights) { // checks to make sure this namespace is not already used in jQuery object (its not!) $.extend({ // allows you to add methods to jQuery Object to be called, such as $.ajax equalHeights: function(elm) { // our function to be added // the following simply checks to see if a jQuery Object is being passed in, or an element tag name/id/class if (typeof elm === "string") elm = $(elm); // now convert possible string to object // the following maps all of our elements passed in and returns an array of their heights, // then by using the math max method, we grab the biggest one var maxHeight = Math.max.apply(null, $(".inner").map(function () { return $(this).height(); }).get()); // the following maintains with jQuery "chainability" return elm.each(function(index){ $(this).height(maxHeight); }); } }); $.fn.extend({ // here we add element object methods, such as $("element").toggle equalHeights: function() { // simply return our already made function, maintaining chainability return $.equalHeights($(this)); } }); } })(jQuery); $(function(){ $(".inner").equalHeights(); // force resize on window height change if needed $(window).resize(function(e) { $(".inner").equalHeights(); }); });