Как разместить div ниже другого div?

Это может быть легко, вопрос. у меня есть#slider Div, который имеет изображение после этого у меня есть#content div с текстом. Я пробовал относительное положение, поэтому я думаю, что оно должно прийти после предыдущего div, я имею в виду#slider но здесь это не так.

В чем здесь проблема. как это побороть?

HTML

<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"  />
</div>
<div id="content">
<div id="text">
    samplle 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