how to fix div position under another div which having scrol
Posted: Fri Feb 06, 2009 2:07 am
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
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