title: css layout get distorted when zoom in
body: <p><strong>Page adjust according to screen resolution like stackoverflow</strong>
  problem with <strong>zooming</strong> and <strong>css layout</strong> get <strong>distorted</strong> when zoom in. i'm new in css and first and very big problem i am facing is that when i zoom in or out page get distorted. i want to do something like my page fits every resolution. please give me such solution that i can <strong>apply on whole page</strong> including body and footer </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div id="head"&gt;
          &lt;div id="head_back"&gt;
          &lt;b id="logo"&gt;LOGO&lt;/b&gt;
          &lt;div id="nav"&gt;
              &lt;b&gt;2000&lt;/b&gt;
              &lt;b&gt;2001&lt;/b&gt;
              &lt;b&gt;2002&lt;/b&gt;
              &lt;b&gt;2004&lt;/b&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrapper{width:100%; background-color:red; overflow:auto; margin:0; padding:0;}
  #head
  {
      width:100%; height:100px; 
      color:#902df3;
      position:relative;
      top:-10px;
      left:-7.8px;
      font-family:"Arial Black", Gadget, sans-serif;
      padding-right:17px;
  
  }
  #head #head_back
  {
      position:absolute;
      line-height:90px;
      top:0;
      left:0;
      width:100%;
      height:100px;
      background:#999; background-size:cover; background-repeat:no-repeat; 
  }
  #head #logo
  {
      font-size:46px;
      position:absolute;  
  }
  #head #nav
  {
      font-size:26px;
      position:absolute;
      left:60%;   
  }
  body html
  {
  position: fixed;
  width: 100%;
  overflow:scroll;
  }
  </code></pre>