div layout problem

[Jim Harrison]

Hello,

I have the following layout

    
<div id="main_area">

   <div id="leftside_div">
   </div>

   <div id="rightside_div">
   </div>

   <div id="slideshow_div">
   </div>

</div>

The following is the CSS for the ID elements:

    

#main_area
{
	width: 100%;
	height: 460px;
	text-align: left;
}
#leftside_div
{
	float: left;
	width: 300px;
}
#rightside_div
{
	float: right;
	width: 600px;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.3em;
}
#slideshow_div
{
	float: left;
	position: absolute;
	width: 900px;
	height: 460px;
	visibility: hidden;
	background: #000000;
	padding: 0px;
	margin: 0px;
}

When the user clicks a button in the rightside_div, I have the following javascript execute:

	 document.getElementById('slideshow_div').style.zIndex = '10';
	 document.getElementById('slideshow_div').style.visibility = 'visible';

that covers all the left/right side divs and shows the slideshow_div. In Firefox 3.0+, this all works great. However IE 7 only covers the rightside_div and expands over to the right.

I've tried _top: -300px; and that doesn't shift the slideshow_div left.

How can I change my layout to have the desired effect of the slideshow covering both the left/right sides after the user clicks that button?

Thanks,Jim

[Ankit Garg]

I'm not sure what you are trying to achieve here, but consider using position:absolute for our slideshow_div...

[Bear Bibeault]

I'm also not sure what desired behavior is being described, but I generally avoid absolute positioning as it usually introduces more problems than it solves.

[Cloudgen C.F. Wong]

If you want to cover both the leftside_div and rightside_div by the slideshow_div, is it simplier for you hide both and leftside_div and rightside_div?