Question

My CSS-fu is letting me down here:
What I’d like to do is position two child divs (with variable heights) to be overlapping.

Using: position: absolute; top: 0px; left: 0px; is the only way I know how, with the parent set to position: relative.

The problem with this is that the child divs are taken out of the layout as per the CSS spec, shrinking the parent div to height: 0px, so that I can’t clear that div and put any content below.

My amazing ASCII art below details what I’m going for… any ideas?

As an aside, I need these divs to be overlapping exactly for smooth jQuery fades, and maybe trying out some of the new Webkit transforms, a la Apple’s cardflip demo:
https://developer.apple.com/library/archive/samplecode/CardFlip/Introduction/Intro.html

If there’s another way to get them overlapped exactly in CSS, and/or if there’s another way to get cardflip-like action (using jQuery or Webkit/CSS) with two child divs of variable heights, I’m all ears!

|-------------------------------------------------|
|  Parent div                                     |
|  |-------------------------------------------|  |
|  |                                           |  |
|  |          DIVS 1 & 2 (overlapped)          |  |
|  |                                           |  |
|  |-------------------------------------------|  |
|-------------------------------------------------|

...more content below, after clearing the parent...

Answer 1

How about just setting one of them to postition:absolute? That way one child div will still give height to the parent div, but the other will be taken out of the flow.

.parent { position: relative; }
.child1 { position: absolute; top:0; left:0; }
.child2 { position: relative; }

Just a jQuery suggestion:

var height1 = $(".child1").height();
var height2 = $(".child2").height();
if(height1 > height2)
    $(".child2").height(height1);
else
    $(".child1").height(height2);

And now you’ll have seamless fades between the two <div>‘s