Question

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 “container” div which you can see if you change “height” to “min-height” in .container (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 position: relative, 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.

<style>    
#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 }
</style>

<div style='float:left;clear:right'>some text</div>
<div id='scrolling_div'>
<table>
    <tr>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
        <td>
            <div class="container">
                <div id="stack3"><div style='margin-left:90px'>3</div></div>
                <div id="stack2"><div style='margin-left:90px'>2</div></div>
                <div id="stack1"><div style='margin-left:90px'>1</div></div>
            </div>
        </td>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
    </tr>
</table>
</div>
<div style='float:left;clear:left'>some text</div>

Or you can play with the code here: http://jsfiddle.net/bAzND/

Answer 1

I think I found the solution to my dilemma. In case anyone else runs into this issue in the future, the solution was to change all the “stack” divs from position:relative to position:absolute, remove the top attributes, then add style='position:relative;width:160px' to the .container <div> of the stack. The width must be a fixed value.

Here is the code:

<style>    
#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;margin-left:60px;position:absolute;z-index:1 }
#stack2 { background-color:green;margin-left:30px;position:absolute;z-index:2 }
#stack3 { background-color:blue;margin-top:0px;margin-left:0px;position:absolute;z-index:3 }
</style>


<div style='float:left;clear:right'>some text</div>
<div id='scrolling_div'>
<table>
    <tr>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
        <td>
            <div class="container" style='position:relative;width:160px'>
                <div id="stack3"><div style='margin-left:90px'>3</div></div>
                <div id="stack2"><div style='margin-left:90px'>2</div></div>
                <div id="stack1"><div style='margin-left:90px'>1</div></div>
            </div>
        </td>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
        <td>
            <div class="container"><div class="other">test</div></div>
        </td>
    </tr>
</table>
</div>
<div style='float:left;clear:left'>some text</div>

Here is the fixed code example: http://jsfiddle.net/ChSfE/