title: CSS: div fixed vertically, but movable horizontally
body: <p>Hey,
  Here's what I am trying to do:
  There is one scrollable div with fixed size, say 400x400 px. Inside there are two divs: header div and data div. Both their height and width are variable. What I want to do is be able to scroll horizontally both header and data divs but vertically only the data. In other words, I want the header div be fixed vertically, but scrollable horizontally and data grid - fully scrollable.
  here's the setup:</p>
  
  <pre><code>&lt;div style="height: 400px; width: 400px; overflow: scroll; position: static;" &gt;
  &lt;div style="z-index: 7500; position: fixed; height: 100px; width: 800px"&gt;
      //header
  &lt;/div&gt;
  &lt;div style="poxition: relative; top: 100px; width: 800px; height: 2000px"&gt;
      //data
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried something like this:</p>
  
  <pre><code>&lt;div style="height: 400px; width: 400px; overflow: scroll; overflow-y: hidden; position: static;" &gt;
  &lt;div style="z-index: 7500; height: 100px; width: 800px; position: relative"&gt;
      //header
  
  &lt;div style="height: 400px; width:auto; overflow: scroll; overflow-x: hidden; position: static;" &gt;
      &lt;div style="position: relative; top: 100px; width: 800px; height: 2000px"&gt;
          //data
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>it works fine, except vertical scrollbar is... well... scrolled horizontally with my data div, i need it to be shown all the time.</p>
  
  <p>I really don't want to use frames, so is it possible to do this with divs? mb, there're some properties, like
      style="position-y: fixed; position-x: relative"
  ?</p>
  
  <p>thx</p>