My CSS-fu is letting me down here: What I'd like to do is position two child divs 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 jQuery fades, and maybe trying out some of the new Webkit transforms, a la Apple's cardflip demo: http://developer.apple.com/safari/library/samplecode/CardFlip/Introduction/Intro.html

If there's another way to get them overlapped exactly in CSS, I'm all ears.

Thanks!

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

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