Why won't the scrollbar work on this horizontal DIV?

Question

So I read through the thread How to get Floating DIVs inside fixed-width DIV to continue horizontally? and used pd.'s great answer to build a fixed-size DIV to contain inline elements that would scroll horizontally.

It worked, it did exactly as I wanted... except the horizontal scrollbar doesn't actually work. If I make the DIV's height 140px so that there's also a vertical scrollbar, then it works. But when I make the diff tall enough to only have a horizontal scrollbar, it doesn't work! It's racking my brain. Here's the code:

<div style="height: 180px; width: 694px; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap;">
    <span style="width: 160px; height: 120px; background: rgba(255,255, 255, 0.9); display: inline-block; margin: 5px 0 5px 0;"></span>
    <span style="width: 160px; height: 120px; background: rgba(255,255, 255, 0.9); display: inline-block; margin: 5px 0 5px 13px;"></span>
    <span style="width: 160px; height: 120px; background: rgba(255,255, 255, 0.9); display: inline-block; margin: 5px 0 5px 13px;"></span>
    <span style="width: 160px; height: 120px; background: rgba(255,255, 255, 0.9); display: inline-block; margin: 5px 0 5px 13px;"></span>
    <span style="width: 160px; height: 120px; background: rgba(255,255, 255, 0.9); display: inline-block; margin: 5px 0 5px 13px;"></span>
</div>

If you'd like to look at the page directly, http://12for12boston.tumblr.com, PW: 12412.

Thanks guys!

Answer 1

A DIV (see below) is overlaying on top of the scrollbar, which is why the scrollbar is visible, but not functional. Unsure as to what the purpose of the DIV is, but if you remove it works just fine.

<div style="height: 50px; width: 960px; position: absolute; top:694px; left: 50%; margin-left: -480px;"></div>