gjh42:
I believe that was some trick you found a long time ago and applied; I don't know exactly why it works (or doesn't).
You may be able to achieve the effect with a more modern CSS property, display: table-cell;
This has been around for many years, but until recently couldn't be simply used because everybody's favorite browser coughIE6/7cough didn't support it. Now that those thankfully are about dead, some simple styling rules can finally be used freely. Any continuous series of one element type which have this declaration applied will be handled as if they are <td> cells enclosed in a <tr> table row.
gjh42:
Note that the elements this is applied to need to be directly sequential, not sub-elements of sequential elements. So it would have to be applied at the middlebox container level rather than .middleboxContent.
So I'm still playing.. As I was Googling for solutions, I kept running into more jQuery solutions versus CSS solutions.. Tried a NUMBER of them, and some work, others do not work QUITE as I would like/expect.. After some trial and error, I finally settled on one from this site: http://blog.huidesign.com/make-equal-height-columns-by-jquery/
<script type="text/javascript">
$(document).ready( function(){
function equalHeight(obj){
var heightArray = obj.children("div").map( function(){
return $(this).height();
}).get();
var maxHeight = Math.max.apply( Math, heightArray);
obj.children("div").height(maxHeight);
}
$(".navColumnMiddleWrapper").each( function(){
equalHeight( $(this));
})
$("a.showLink").click(function(){
$(this).parents().children("span").toggle();
$(this).parents(".navColumnMiddleWrapper").children().removeAttr("style");
equalHeight( $(this).parents("div"));
});
})
</script>
The beauty of this one is it's a solution that works specifically well when there is dynamic content.. and in the layout I'm tweaking I really don't want the height of the second row to be based on the longest item in the first row.. It seems to equalize each row separately (which is what I do want). The big advantage of this method is that it probably also works in that browser we all love to hate coughIE6/7cough..
Because I'd really like to get a pure CSS solution eventually, I am gonna mess around with display: table-cell and hammer out a solution.. I found a good guide to help with me understand how I need to set it up (http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/). In the meantime I may stick with the javascript solution because it appears that a pure CSS solution will equalize ALL the rows, and that's not quite what I want...
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
