Hello,

I need some positioning help. I have some <div> tags that are created dynamically. Inside them are some more <div>s. One of the divs has text that is truncated because of its size. When I roll over the <div id="ProductTrunc_1"> I want to display the <div id="ProductFull_1"> over the <div id="lowerText_1"> without moving the <div id="lowerText_1"> at all. currently when you roll over the <div id="ProductTrunc_1"> the <div id="ProductFull_1"> shows, but it pushes the <div id="lowerText_1"> to the bottom.

How can I get the <div id="lowerText_1"> to not move at all? I would also like it if the <div id="ProductFull_1"> displayed right over the <div id="ProductTrunc_1">

http://www.servicewhale.com/expandableDiv.htm

Thanks for any help

HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
	.wrapper {
		width: 300px;
		float: left;
		border: solid 1px #CCC;
	}
	
	.lowerText {
		position: relative;
		left: 0;
		top: 0px;
	}
	
	.productNameGridView {
		position: relative;
		left: 0;
		top: 0;
		z-index: 3;
		color: red;
	}
</style>
<script type="text/javascript">

    function expand(x){
        var expandAction = document.getElementById(x);
       
        expandAction.style.display="block";
    }

    function collapse(x){
        var collapseAction = document.getElementById(x);
       
        collapseAction.style.display="none";
    }
   
    function collapseAll(x){
         
       
        for (var i = 1; i <= document.getElementById(x.substring(0, 6)).length; i++)
           {
                document.getElementById(x.substring(0, 12)).style.display="none";
           }
					 
					 
    }
</script>

</head>
<body onload="collapseAll('ProductFull')">
<div class="wrapper">
	<div id="ProductTrunc_1" onmouseover="expand('ProductFull_1');" onmouseout="collapse('ProductFull_1');" class="productName">
	    Some Text
	</div>
	<div id="ProductFull_1" class="productNameGridView">
	    Some More Text Some More Text Some More Text Some More Text Some More Text
	</div>
	<div id="lowerText_1" class="lowerText">
	    Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
	</div>
</div>
<div class="wrapper">
	<div id="ProductTrunc_2" onmouseover="expand('ProductFull_2');" onmouseout="collapse('ProductFull_2');" class="productName">
	    Some Text
	</div>
	<div id="ProductFull_2" class="productNameGridView">
	    Some More Text Some More Text Some More Text Some More Text Some More Text
	</div>
	<div id="lowerText_2" class="lowerText">
	    Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
	</div>
</div>
<div class="wrapper">
	<div id="ProductTrunc_3" onmouseover="expand('ProductFull_3');" onmouseout="collapse('ProductFull_3');" class="productName">
	    Some Text
	</div>
	<div id="ProductFull_3" class="productNameGridView">
	    Some More Text Some More Text Some More Text Some More Text Some More Text
	</div>
	<div id="lowerText_3" class="lowerText">
	    Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
	</div>
</div>
                                          
</body>
</html>