title: fixed layer scrolling
body: <p>HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;div id="header"&gt;
  &lt;div class="logo"&gt;&lt;/div&gt;
  &lt;div class="category"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrap { 
  width:960px; 
  margin:0 auto; 
  position:relative; }
  
  
  #header_wrap { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  min-width:960px; 
  height:105px; 
  background:rgba(256, 256, 256, 0.6); z-index:999; }
  
  
  #header {  
  width:860px; 
  position:relative;  
  height:90px; 
  padding:15px 40px 0 40px; 
  margin:0 auto;  }
  
  .logo { 
  float:left; 
  margin-top:-35px; }
  
  .category { float:right; margin-top:-9px; }
  </code></pre>
  
  <p>I made a fixed header menu on top of page.
  But if browser window's width is smaller than wrap width (especially, when zooming on safari in iphone/ipad.), I can't see the right side(category) of header(fixed).
  Help!</p>