title: CSS Positioning with divs
body: <p>could someone tell me why sport is stuck to the top, where as military and </p>
  
  <p>entertainment are down where they should be?</p>
  
  <p>Basically, i'm trying to position all three subjects in the same place</p>
  
  <p>The reason for the display:None is because JQuery is working to display accordingly</p>
  
  <pre><code>    #topBar {
          position: relative;
          top: 0px;
          left: 0px;
          height: 100px;
          width: 100%;
          margin: 0 auto;
          text-align: center;
          background-color: #000000;
          color: #ffffff;
          text-align: left;
      }
      #topBar span {
          position: absolute;
          bottom: 0;
      }
      #topBar a {
          color: #ffffff;
          text-decoration: none;
      }
      #Sport {
          position: absolute;
          display: none;
          top: 500px;
      }
      #Entertainment {
          position: absolute;
          display: none;
          top: 500px;
      }
      #Military {
          position: absolute;
          display: none;
          top: 500px;
      }
  
  
  HTML:
  
  
  &lt;!DOCTYPE html&gt;
  
  &lt;head&gt; &lt;meta charset="utf-8" /&gt; 
  &lt;title&gt;Matthew Jameson | Virtual Reality&lt;/title&gt;  
  &lt;link rel="stylesheet" href="VR3.css" type="text/css" /&gt;
  &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;html lang="en" &gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
           &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
  
          &lt;/header&gt;
  
  &lt;Div id = "topBar"&gt;
  &lt;span&gt;
  &lt;a id='slink' class='trigger' href='#Sports'&gt;Sports&lt;/a&gt;
  &lt;a id='elink' class='trigger'  href='#Entertainment'&gt;Entertainment&lt;/a &gt;
  &lt;a id='mlink' class='trigger' href='#Military'&gt;Military&lt;/a&gt;
  
  &lt;span&gt;
  &lt;/div&gt;
  
  &lt;Div id = "main"&gt;
  &lt;/div&gt;
  &lt;div id='Sports' class='slink triggered'&gt;
  &lt;iframe width="280" height="158" src="http://www.youtube.com/embed/RPPJ5JHwO4A?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;iframe width="280" height="158" src="http://www.youtube.com/embed/oMLarxR-q08?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  
  &lt;Div id = "Entertainment" class='elink triggered'&gt;
  &lt;iframe width="280" height="158" src="http://www.youtube.com/embed/7vcGqha6xJ0?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;iframe width="280" height="158" src="http://www.youtube.com/embed/La-WRhYeMCw?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  
  &lt;Div id = "Military" class='mlink triggered'&gt;
  &lt;iframe width="280" height="158" src="http://www.youtube.com/embed/6p7FM-mBsNk?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;iframe width="280" height="158" src="http://www.youtube.com/embed/g1afRyN5_MQ?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  &lt;script&gt;
  
  $('.trigger').on('click',function(){
      $('.triggered').slideUp(500);
      var x = $(this).attr('id');
      $('.' + x ).slideDown(500);
  });
  
  
  
  
  
  &lt;/script&gt;
  
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>