title: CSS / Firefox / Mac - Weird vertical scrolling behavior inside div
body: <p>I have a very weird problem.  This ONLY affects Firefox on Mac, using the trackpad (so far as I know), but inside the div that is supposed to be horizontal scrolling only, you are able to scroll vertically too.  There seems to be some extra "padding" below the 2nd "<code>container</code>" div which you can see if you change "<code>height</code>" to "<code>min-height</code>" in <code>.container</code> (this will show up on all browsers).  All I'm trying to accomplish is to have multi-layered divs (the colored stack in the 2nd container div) "stack" on top of each other, using <code>position: relative</code>, but it seems to create extra, unwanted "padding" that I'm unable to get rid of.  Both Chrome and IE do not exhibit this behavior.</p>
  
  <pre><code>&lt;style&gt;    
  #scrolling_div {
      border:2px solid black;
      clear:both;
      float:left;
      overflow-x:auto;
      overflow-y:hidden;
      width:400px;
  }
  
  .container { border:1px dotted black;height:150px;margin:5px }
  .other { width:100px }
  #stack1,#stack2,#stack3 { height:150px;width:100px; }
  #stack1 { background-color:red;top:-300px;margin-left:60px;position:relative;z-index:1 }
  #stack2 { background-color:green;top:-150px;margin-left:30px;position:relative;z-index:2 }
  #stack3 { background-color:blue;top:0px;margin-left:0px;position:relative;z-index:3 }
  &lt;/style&gt;
  
  &lt;div style='float:left;clear:right'&gt;some text&lt;/div&gt;
  &lt;div id='scrolling_div'&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div class="container"&gt;&lt;div class="other"&gt;test&lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="container"&gt;
                  &lt;div id="stack3"&gt;&lt;div style='margin-left:90px'&gt;3&lt;/div&gt;&lt;/div&gt;
                  &lt;div id="stack2"&gt;&lt;div style='margin-left:90px'&gt;2&lt;/div&gt;&lt;/div&gt;
                  &lt;div id="stack1"&gt;&lt;div style='margin-left:90px'&gt;1&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="container"&gt;&lt;div class="other"&gt;test&lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="container"&gt;&lt;div class="other"&gt;test&lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="container"&gt;&lt;div class="other"&gt;test&lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div style='float:left;clear:left'&gt;some text&lt;/div&gt;
  </code></pre>
  
  <p>Or you can play with the code here: <a href="http://jsfiddle.net/bAzND/" rel="nofollow">http://jsfiddle.net/bAzND/</a></p>