Hi; I am trying to get more "with it" by learning to base my web pages on <div>s rather than <frames> but I have run into a problem that has me very confused.:

Context: Simple page with menu buttons in a <div> on the left side of page, that open content in a lager <div> on the right side. User can scoll down the right <div> as there is often a lot of content to browse.

Form: I have a form on some of the right-side content pages that allow users to enter calendar events. One of the controls in the form is a little javascript date-picker that I have used for years and years on my old frames-based pages. There is a date box and a little calendar icon the user can click to open the little one-month calendar grid to click on a specific date (or go to another month).

Problem: On my new <div> based pages, when the user clicks the calendar icon, the little month grid opens waaaay below where one would expect it (right next to the date box). It typically opens in the area well below the visible portion of the content area so the user does not know it is open.

Using my old <frames> method, the calendar grid always appeared right next to the date box and WOULD SCROLL WITH THE FRAME staying in the same position relative to the date box.

here is the code used for showing the control in question:
<div id=\"container4\">
<input  id=\"datechooserex4\" name=\"new_event[event_date]\" size=\"8\" type=\"text\" title\"When is this new event scheduled to take place\" value=\"$now_date\" 
Any thoughts about what the heck might be going on here or how this css newbie (who knows even less about javascript) could go about debugging this problem?