Can't get a scrollable <div> to work right?

I have a single webpage that contains a horizontal menu. The area below the menu is a general area that contains a variety of data. It too is contained within a single <div>. My problem is, that, when the page becomes full and I need to scroll, the general area will scroll overtop the menu rather than behind the menu. What I'm trying to accomplish is have the general area scroll up to the bottom of the menu and then obviously scroll out of site. Below is the structure of my <div>'s.

Code:

---

  <form>
      <div> 'Parent Main <div>
            <div>
                    This div contains a sidebar image
            </div>

            <div>
                  <div>Some Text</div>
                  <div>Menu Option 1</div>
                  <div>Menu Option 2</div>
                  <div>Menu Option 3</div>
                  <div>Menu Option 4</div>
                  <div>Menu Option 5</div>
                  <div>Menu Option 6</div>
            </div>

            <div>
                    General Data which is scrollable. There are multiple <div>'s within this <div>
            </div>
      </div>
  </form>

---

I hope I have explained this right. I've heard that the property "z-index" can be used in a situation like this but I haven't been able to get it to work.
Any ideas?

Thanks,

Anyone have any ideas on this?

z-index should work. How are you trying to use it?