[html] How to place a div below another div?

I have a #slider div with an image. After that, I have a #content div which has text. I have tried position:relative so I think it should come after the previous div, I mean #slider but here it is not coming that way.

What is the problem here? How to overcome it?

HTML

<div id="slider">
    <img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
    <div id="text">
        sample text
    </div>
</div>

CSS

#slider {
    position:absolute;
    left:0;
    height:400px;
}
#slider img {
    width:100%;
}

#content {
    position:relative;
}

#content #text {
    position:relative;
    width:950px;
    height:215px;
    color:red;
}

JSFIDDLE

what about changing the position: relative on your #content #text div to position: absolute

#content #text {
   position:absolute;
   width:950px;
   height:215px;
   color:red;
}

http://jsfiddle.net/CaZY7/12/

then you can use the css properties left and top to position within the #content div