Overlapping two divs and 'clearing' their parent div
- by brady8
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...
