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

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

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

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

ОТВЕТЫ

Ответ 1

Поскольку вы устанавливаете #slider качестве absolute, div содержимого помещается относительно div слайдера. Если вы установите оба в relative, div будет один за другим, как показано здесь:

#slider {
    position:relative;
    left:0;
    height:400px;

    border-style:solid;
    border-width:5px;
}
#slider img {
    width:100%;
}

#content {
    position:relative;
}

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

http://jsfiddle.net/CaZY7/18/

Ответ 2

как изменить положение : относительное на #content #text div до : абсолютное

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

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

то вы можете использовать свойства css left и top для размещения в #content div