Page 1 of 1

A div influences another div's height causing info hiding

Posted: Sun Nov 13, 2005 6:32 am
by raghavan20
I have a layout problem.
I have a div wrapper which has two childs left_section and right_section
left_section has one long table in it with height more than tables in the right section but the left_section.table height is shortened and made equal to the total height of the tables in the right_section.
This happens only in IE and I don't know why.
It could be more clear when you have a look at the working file and at the view source after that.


This is the sample view source file at my site

Code: Select all

<link href="../css/letter2india_1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#wrapper{
	margin-left:25px;
}

#left_section{
	height:auto; float:left; width:400px;
}

table.personal_details, table.recent_tasks, table.recent_recipients{
	background-color:#FFFFFF; margin-right:50px; margin-bottom:5px;
}

table.recent_tasks, table.recent_recipients{
	width:500px;
}

#table.personal_details{
	width:400px;
}

table.recent_tasks td, table.recent_recipients td{
	padding-left:2px; margin-bottom:2px
}

table.personal_details  td{
	padding:5px;
}

</style></head>

<body><div id='0296427050'  style='text-align:center'>

<div id = 'wrapper'>
	<div id = 'left_section'>
	<div class="subject">You are viewing the profile of <span class="highlight_info">raghavan20@rediffmail.com</span> | Member since <span class="highlight_info">09-11-2005 03:39:43</span></div>
	<!-- Start of displaying personal and contact details -->
	<table class = 'personal_details'>
	<tr><td colspan="2"><div class = 'header'>Personal Details</div></td></tr>
	<tr><td>First Name</td><td>raghavan</td></tr>
	<tr><td>Last Name</td><td>chockalingam</td></tr>
	<tr><td>Gender</td><td></td></tr>
	<tr><td>Date of Birth</td><td></td></tr>
	<tr><td>Other Email address</td><td>raghavan20@rediffmail.com</td></tr>
	
	<tr><td colspan="2"><div class = 'header'>Contact Details</div></td></tr>
	<tr><td>Street</td><td></td></tr>
	<tr><td>City</td><td></td></tr>
	<tr><td>State</td><td></td></tr>
	<tr><td>Country</td><td></td></tr>
	<tr><td>Postcode</td><td></td></tr>
	</table>
	<!-- End of displaying personal and contact details -->
	
	
	<!-- Start of displaying recent tasks -->
		</div>
	<div id = 'right_section'>
	<table class = 'recent_tasks'>
	<tr><td colspan="3"><div class = 'header'>Recent tasks</div></td></tr>
				<tr>
				<td><div class="header">Start Date</div></td>
				<td><div class="header">Is Completed</div></td>
				<td><div class="header">Completion Date</div></td>
			</tr>
			
							 	
					
				<!-- Start of displaying details of an individual task -->
				<tr>
					<td><a href = 'viewTask.php?task_id=1&PHPSESSID=aa35002f0634aad6a513a76bfaeffc8c'>08-11-2005 11:28:11</a></td>
					<td>Y</td>
					<td>09-11-2005 11:27:55</td>
				</tr>		
				<!-- End of displaying details of an individual task -->
				
				
							 	
					
				<!-- Start of displaying details of an individual task -->
				<tr>
					<td><a href = 'viewTask.php?task_id=2&PHPSESSID=aa35002f0634aad6a513a76bfaeffc8c'>09-11-2005 03:35:00</a></td>
					<td>N</td>
					<td>Unavailable</td>
				</tr>		
				<!-- End of displaying details of an individual task -->
				
				
				
				<!-- Displaying link to view more tasks for the same member -->
				<tr><td colspan="2"></td><td><a href = 'searchTask.php?search_by=member_id&member_id=15&PHPSESSID=aa35002f0634aad6a513a76bfaeffc8c'>View More Tasks</a></td></tr>		
				
				
		</table>
	<!-- End of displaying recent tasks -->
	
	<!-- Start of displaying recent recipients -->
		
	
	<table class = 'recent_recipients'>
	<tr><td colspan="3"><div class = 'header'>Recent recipients</div></td></tr>
				<tr>
				<td><div class="header">First Name</div></td>
				<td><div class="header">Phone</div></td>
				<td><div class="header">City</div></td>
			</tr>
			
							
					
				<!-- Start of displaying details of an individual recipient -->
				<tr>
					<td><a href = 'viewRecipient.php?recipient_id=1&PHPSESSID=aa35002f0634aad6a513a76bfaeffc8c'>aravind</a></td>
					<td>Not Available</td>
					<td>Not available</td>
				</tr>		
				<!-- End of displaying details of an individual recipient -->
				
				
				
				<!-- Displaying link to view more recipients for the same member -->
				<tr><td colspan="2"></td><td><a href = 'searchRecipients.php?search_by=member_id&member_id=15&PHPSESSID=aa35002f0634aad6a513a76bfaeffc8c'>View More Recipients</a></td></tr>		
				
				
		</table>

	
	
	<!-- End of displaying recent recipients -->
	
	</div>
	</div>
<script type="text/javascript">
	/*alert("left section:" + document.getElementById("left_section").pixelHeight);
	alert("right section:" + document.getElementById("right_section").pixelHeight);
	var height = document.getElementById("left_section").pixelHeight;
	document.getElementById("right_section").pixelHeight = height;
	alert("left section:" + document.getElementById("left_section").offsetHeight);
	alert("right section:" + document.getElementById("right_section").offsetHeight);*/
</script>
</body>
</html>
Thanks for any help