title: how to fix position vertically and absolute horizontally for a division
body: <p>I'm trying to fix header vertically and absolute horizontally. I am using the following codes.</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="header_position.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>body tag
      </p>
  
  <pre><code>$(window).scroll(function(event) {
  $("#headerpos").css("margin-left", 0-$(document).scrollLeft());
  });
  
  
  
  #headerpos{
  position:fixed;
  border-top:8px solid #8DC540;
  background:#1E415B;
  width:956px;
  padding-bottom:7px;
  margin:auto;
  z-index:100;
   }
  </code></pre>
  
  <p>I tried using class attrb in <code>div</code> as well as id attrb</p>
  
  <pre><code>.header{
  position:fixed;
  border-top:8px solid #8DC540;
  background:#1E415B;
  width:956px;
  padding-bottom:7px;
  margin:auto;
  z-index:100;
   }
  </code></pre>
  
  <p>Also tried by removing <code>margin:auto</code>;</p>
  
  <p>I saw this all from the link <a href="https://stackoverflow.com/questions/8327093/position-a-div-fixed-vertically-and-absolute-horizontally-within-a-position">Position a Div &quot;Fixed&quot; Vertically and &quot;Absolute&quot; Horizontally within a &quot;Position:Relative&quot; Container Div</a></p>
  
  <p>But it is not working and in Chrome if I go to inspect element I see an error:</p>
  
  <blockquote>
    <p>Uncaught Reference error: $ is not defined (at line 1)</p>
  </blockquote>
  
  <p>Please help. It's very important.</p>