Position absolute without parent height

Question

I would like to place 4 divs like the following picture; the parent div has unknown height (auto). Each div would have an image with 100% fit, then the height of the divs are also unknown.

I was thinking using absolute position on the divs, but I need the background of the parent. Is there some jquery plugin or css3 trick to do the job?

Answer 1

JQuery:

$(document).ready(function() {
    var divHeight = $('.div1').height() + $('.div2').height();
    $('.containerDiv').css({ "height" : divHeight });
});

This will tally the heights of .div1 and .div2 (of course you can adjust to your liking) and apply that height to whatever your containing div, or whatever div you want.