title: Positioning a div beneath other element on the page
body: <p>I have an issue regarding the positioning of a div on my page. I would like to have it underneath my other two elements, but everything I have tried previously has not worked - even though the internet seemed to tell me that it should. 
  Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#headingmain {
   position: relative;
   top: 150px;
   font-family: Comic Sans MS;
   }
   #main {
   margin: 0 auto; 
   border-radius: 25px;
   background: #73AD21;
   padding: 20px;
   width: 200px;
   height: 150px;
    
   }
  #para {
   position: relative;
   top: 150px;
   font-family: Comic Sans MS;
   }
   
  
   
  #test {font-family: Comic Sans MS;}
   
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
     &lt;h1 align="center" id="headingmain"&gt;Title&lt;/h1&gt;
     &lt;p id="para" align="center"&gt;para&lt;/p&gt;
  
     &lt;div id="main" align="center"&gt;
     &lt;p id="test"&gt;Test&lt;/p&gt;
     &lt;/div&gt;
    &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I cannot for the life of me find a tutorial on the internet that will position the div underneath the other two elements. This was my last resort, and I am thankful for any help you guys can provide. </p>
  
  <p>Thanks again!</p>