How put autoresizable div behind another?

I need to get the effect of photo sliders as shown in the image below. I need to get all 3 divs auto resizable, one behind the other, but i can't get it.

enter image description here

HTML CODE:

<html>
<head>
    <style>
        body {
            height: 100%;
            width: 100%;
            margin: auto;
        }

        #slide1 {
            height: auto;
            width: 50%;
            position: relative;
        }

        #slide1 img {
            height: 100%;
            width: 100%;
            position: relative;
        }


        #slide2 {
            height: auto;
            width: 50%;
            position: relative;
        }

        #slide2 img {
            height: 100%;
            width: 100%;
            position: relative;
        }

        #slide3 {
            height: auto;
            width: 50%;
            position: relative;
        }

        #slide3 img {
            height: 100%;
            width: 100%;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="slide1">
        <img src="no_image.jpg" alt=""></img>
    </div>

    <div id="slide2">
        <img src="no_image2.jpg" alt=""></img>
    </div>

    <div id="slide3">
        <img src="no_image3.jpg" alt=""></img>
    </div>
</body>

DEMO

http://jsfiddle.net/wm4bk/

Anyone can help me please ? Thanks in advance.

Sorry if I have typos.

Solution

position:relative is the culprit. The browser causes them to stack vertically in realtion to one another. Use

position:absolute;

to get them where you want.

The fiddle has css for position:absolute and inline styles for each slide.

http://jsfiddle.net/646Z6/