title: Stacking Div On Top Of Other Header Elements
body: <p>I'm having difficulty in placing a div containing contact info in my header. I've been reading up on this issue for a few hours &amp; haven't quite found a solution yet. I'm trying to stack my contact info on the top right of my layout.</p>
  
  <p>--</p>
  
  <p><strong>Image of what I'd like to achieve:</strong></p>
  
  <p><a href="http://i45.tinypic.com/2zrgu8o.jpg" rel="nofollow">http://i45.tinypic.com/2zrgu8o.jpg</a></p>
  
  <p><strong>Image of what my code is currently producing:</strong></p>
  
  <p><a href="http://i48.tinypic.com/mbhlcz.jpg" rel="nofollow">http://i48.tinypic.com/mbhlcz.jpg</a></p>
  
  <p>--</p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
    &lt;link rel="stylesheet" href="/css/header.css" /&gt;
  
      &lt;/head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=big5" /&gt;&lt;/head&gt;
  
  &lt;body style="margin:0; padding:0;"&gt;
  
  &lt;div id="logo"&gt;
  &lt;img src="/images/logo-top.png"&gt;
  &lt;/div&gt;
  
  &lt;div class="contact"&gt;
  Email: sadlkj@yahoo.com | Phone: 1 (732) 235-7239
  &lt;/div&gt;
  
  
  
  &lt;div id="header-bg"&gt; 
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>#logo {
      postion: fixed;
      width: 300px;
      top: 0;
      left: 0;
      right: 0;
      margin-left: auto; 
      margin-right: auto;
      z-index: 1;
  
  } 
  
  #header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 50px;       
      background-image: url("/images/header-bg.png");
      background-repeat: repeat-x;
      z-index: -1;
  
  
  }
  
  .contact {
      float:right;
      margin-left:10px;
      margin-bottom:10px;}
  }
  </code></pre>
  
  <p>Your help is much appreciated.</p>