title: CSS: position:fixed and horizontal scrolling
body: <p>I'm having problems with a 100% height div. </p>
  
  <p>By now, I've used <code>position:fixed</code> to avoid getting a blank gap if you scroll down with <code>top:0</code> and <code>bottom:0</code>. That works great, but if you scroll horizontally, the div doesn't scroll with the rest of the page. </p>
  
  <p>I've positioned 20px left from its container and it stays in the right position when the browser is not narrower than the document, but when it is is when the problems start.</p>
  
  <p>EDIT: The green div should behave as the gray one and move when you scroll horizontally instead of staying in place.</p>
  
  <p>Here you can find the code:</p>
  
  <pre><code>&lt;div style="width: 1200px; margin: 0 auto; padding-bottom:50px"&gt;
    &lt;div style="background-color: #CFC; width: 340px; position:fixed; margin-left: 20px; top:0px; bottom:0px"&gt;&lt;/div&gt;
    &lt;div style="background-color: #CCC; width: 340px; height: 395px; position: absolute; margin-left: 20px; top: 0px"&gt;&lt;/div&gt;
    &lt;div style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); margin-top: 60px"&gt;
      &lt;div style="background-color: #FFF; width: 1200px; height: 260px"&gt;&lt;/div&gt;
      &lt;div style="background-color: #666; width: 1200px; height: 26px"&gt;&lt;/div&gt;
      &lt;div style="background-color: #FFF; width: 1200px; min-height: 500px"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jsFiddle - <a href="http://jsfiddle.net/q7tEE/" rel="nofollow noreferrer">http://jsfiddle.net/q7tEE/</a></p>