A div influences another div's height causing info hiding
Posted: Sun Nov 13, 2005 6:32 am
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
Thanks for any help
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>