title: Place div below other div
body: <p>I am making my first layout by using full div elements but I have encountered a problem.
  I have a div with fixed position, and auto height(will expand based on content) but I can't seem to be able to place another div below it. How can the div below automatically be positioned depending on the height of the div above?</p>
  
  <p>These divs will be included inside a wrapper div that places them on the center of the screen.</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/kfbjd/" rel="nofollow noreferrer">http://jsfiddle.net/kfbjd/</a> (note that the first div has a top value so the bottom div overrides it)
  Fixed jsfiddle: <a href="http://jsfiddle.net/kfbjd/14/" rel="nofollow noreferrer">http://jsfiddle.net/kfbjd/14/</a></p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;div id="maintext"&gt;MAIN&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="about"&gt;
  &lt;div id="maintext"&gt;ABOUT&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;style type="text/css"&gt;
  #main{
      background-color:#000;
      width:900px;
      top:129px;
      position:fixed;
  }
  
  #about{
      background-color:#000;
      width:900px;
      position:relative;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Thanks for your suggestions adding top:129px to #about fixed it. There is an issue though, although it appears correctly on the jsfiddle on my browser the text appears wrapped: </p>
  
  <p><img src="https://i.stack.imgur.com/5NkbH.jpg" alt="enter image description here"></p>