title: position:fixed -- content disappearing on Zoom
body: <p>went through the tutorial <a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/" rel="nofollow">http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/</a> and tried the same to make a fixed top bar (just like Facebook,twitter,techCrunch and any other popular sites out there),but the bar fails on ZOOM.</p>
  
  <p>Here's an example of what i mean -- <a href="http://rtabl.es/designingforstartups" rel="nofollow">http://rtabl.es/designingforstartups</a> -- if you zoom in that link,you can see that the content on the right disappears from the screen . Same thing is happening with me,and i dont want the content to disappear on zoom..</p>
  
  <p>Here's the test code,followed the tutorial and gave the container a <code>position:fixed</code> and the contents have <code>position:relative</code> with a <code>float:left</code> -- wondering where i'm going wrong.</p>
  
  <p>Code -- </p>
  
  <pre><code>        &lt;html&gt;
      &lt;style type="text/css"&gt;
      #Contianer{
      position: fixed;
      height: 35px;
      width: 100%;
      z-index: 9999;
      color: white;   
      background-color: #474747;
      }
      .x{
      float: left;
      text-align: center; 
      position: relative;
      line-height: 35px;
      border:1px solid white;
      }
      #a{
      width:20%;
      text-align: left;
      min-width: 100px;
      }
      #b{
      width:20%;
      min-width: 100px;
      text-align: left;
      height: 35px;
      display: table-cell;
      } 
      #c{
      min-width: 200px;
      width:40%;
      }
      #d,#e{
      min-width: 50px;
      width:10%;
          }
      body{
      border:0;
      margin: 0;
      }
  
      &lt;/style&gt;
      &lt;body&gt;
      &lt;div class="Contianer" id="Contianer"&gt;
      &lt;div id="a"  class="x"&gt;
          foo
      &lt;/div&gt;
      &lt;div id="b" class="x"&gt;
          bar
      &lt;/div&gt;
      &lt;div id="c" class="x"&gt;
          tom 
      &lt;/div&gt;
      &lt;div id="d" class="x"&gt;
          jerry
      &lt;/div&gt;          
      &lt;div id="e" class="x"&gt;          
          Out
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
  </code></pre>