How to place a div below another div?

Question

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

Answer 1

You have set #slider as absolute, which means that it "is positioned relative to the nearest positioned ancestor" (confusing, right?). Meanwhile, #content div is placed relative, which means "relative to its normal position". So the position of the 2 divs is not related.

You can read about CSS positioning here

If you set both to relative, the divs will be one after the other, as shown here:

#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/uorgj4e1/