title: How to place a div below another div?
body: <p>I have a <code>#slider</code> div with an image. After that, I have a <code>#content</code> div which has text. I have tried <code>position:relative</code> so I think it should come after the previous div, I mean <code>#slider</code> but here it is not coming that way.</p>
  
  <p>What is the problem here? How to overcome it?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="slider"&gt;
      &lt;img src="http://oi43.tinypic.com/25k319l.jpg"/&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;div id="text"&gt;
          sample text
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#slider {
      position:absolute;
      left:0;
      height:400px;
  }
  #slider img {
      width:100%;
  }
  
  #content {
      position:relative;
  }
  
  #content #text {
      position:relative;
      width:950px;
      height:215px;
      color:red;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/CaZY7/" rel="noreferrer">JSFIDDLE</a></p>