title: CSS positioning not working in internet explorer
body: <p>I have one problem with internet explorer about css div positioning. </p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/jPaaGK" rel="nofollow">DEMO</a></strong> from codepen.io .</p>
  
  <p>If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?</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>    .test {
        display: block;
        position: absolute;
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        max-width: 580px;
        min-width: 300px;
        margin-top: 64px;
        margin-bottom: 20px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 2px;
        background-color: #f7f7f7;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
        -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -moz-border-radius: 3px;
        min-height: 840px;
      }
  .header {
    height: 12rem;
    background: #009688;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>