title: HTML/CSS Div Positioning
body: <p>I am working on a website for my personal use and have developed a splash page. I have a couple of images with some lines to split the page up up a little bit. <a href="http://users.aber.ac.uk/dah27/personal" rel="nofollow">Here is the splash page.</a></p>
  
  <p>The main issue I have is that I have used absolute position within my CSS for the position of each element. Obviously depending on the screen that the viewer will be using, it will be positioned left/right, not in the middle. I thought of using a center starting point and using relative positioning. Would that be the correct way to go down? </p>
  
  <p><strong>Is there a specific way in which I can achieve the elements to be centered and in that "formation" no matter on the screen resolution?</strong></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Daniel Hopkins Personal Website&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="hr_top"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="hr"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="hr_bot"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;center&gt;
              &lt;div class="logo"&gt;
                  &lt;img src="logo.png"/&gt;
              &lt;/div&gt;
              &lt;div class="logoname"&gt;
                  &lt;img src="logoname2.png"/&gt;
              &lt;/div&gt;
              &lt;div class="enter"&gt;&lt;b&gt;&lt;a href"home.html"&gt;Enter&lt;/a&gt;&lt;/b&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body {}
  .hr {
      width:2px;
      height:350px;
      background-color:#000000;
      position:absolute;
      top:140px;
      left:884px;
      z- index:10;
      background: -webkit-linear-gradient(white, black, white);
  }
  .logo {
      position:absolute;
      top:200px;
      left:640px;
      z-index:10;
  }
  .logoname {
      position:absolute;
      top:260px;
      left:900px;
      z-index:10;
  }
  .hr_top {
      width:600px;
      height:2px;
      position:absolute;
      top:180px;
      left:640px;
      z-index:10;
      background: -webkit-linear-gradient(left, white, black, white);
  }
  .hr_bot {
      width:600px;
      height:2px;
      background-color:#000000;
      position:absolute;
      top:442px;
      left:640px;
      z-index:10;
      background: -webkit-linear-gradient(left, white, black, white);
  }
  .enter {
      position:absolute;
      top:400px;
      left:910px;
      z-index:10;
      font-size:22px;
      font-variant:small-caps;
      font-style:bold;
      font-family:Helvetica;
      color:black;
  }
  a:link {
      text-decoration:none;
      color:#000000;
  }
  /* unvisited link */
   a:visited {
      text-decoration:none;
      color:#000000;
  }
  /* visited link */
   a:hover {
      text-decoration:underline;
      color:#000000;
  }
  /* mouse over link */
   a:active {
      text-decoration:underline;
      color:#000000;
  }
  /* selected link */
  </code></pre>