how to fix div position under another div which having scroll bar

[uday M]

hi,

I have  page which contain a Div (page) having scroll bar ,under that I create another div (preview_div ) . while page is scroll I want to display  preview_div  at top of page div.

my code is run on Firefox but not in IE.

see link. http://theinterest.nagpur.us/

 

my code is:

 

<div class="page" id="page" onMouseOver="showDiv(event)">

  <table border="0" cellpadding="0" cellspacing="0" >

    <TR>

      <TD>

        <div class="leftnav" id="leftnav">

          <?php echo $left_div ?>

        </div>

      </TD>

      <TD valign="top" >

        <div class="middlenav">

          <div class="prev_back"></div>

          <div class="midouter" id="preview_div">

                <div class="midleft_prev"></div>

                <div class="middetail_prev" id="middetail_prev">

                  <?php

 

                        foreach($all_news[1] as $preview_key=>$preview_val)

                        {

                                echo "<div id ='prev".$preview_key."'  style='display:none;'>".$preview_val."</div>";

                        }

                        ?>

                                <div id="total_prev" style="display:none"><?php echo count($all_news[1]); ?> </div>

                </div>

                <div class="midright_prev"></div>

          </div>

          <div class="midouter_prev"></div>

          <?php

                  foreach($all_news[0]  as $key=>$news_value)

                  {

          ?>

                        <div class="midouter">

                                <div class="midleft"></div>

                                <div class="middetail" onmouseover="show_preview(<?php echo $key; ?>)">

 

                                  <?php  if($news_value) echo $news_value; ?>

 

                                </div>

                                <div class="midright"></div>

                        </div>

 

          <?php

 

              }

          ?>

 

        </div>

      </TD>

      <TD >

        <div class="rightnav" id="rightnav">

          <?php echo $right_div ;  ?>

        </div>

      </TD>

    </TR>

  </table>

</div>

 

and CSS :

.page

{

margin-top:10px;

        overflow:auto;

        position: relative;

        z-index: 2;

}

 

 

.page  td

{

        width:33%;

        vertical-align:top;

}

.middlenav

{

        display:block;

margin:0;

        width:auto;

}

 

#preview_div

{

    height:203px;

    left:32.5%;

    margin:0;

    padding:0 16px 0px 2;

    position:fixed;

    //position: absolute;

    right:32.5%;

    width:auto;

    z-index:1;

}

 

please help