I have 3 divs of same height (10% of parent element) placed horizontally and all of them looks of same height and at same offset from parent element but
when I placed a table within 1st div, the other two divs moves little bit downward.
I am not able to find out, Code is belwe, Please help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title> New Document </title>
.portlet {
font-family:trebuchet ms; 
border: solid gray 1px;
display: inline;
text-align: left;
margin: 1%;

.portlet div.heading {
font-size: x-small;
font-weight: bold;
padding-left: 5px;

.portlet div.data {
overflow: auto; 
border: 0px solid black;
padding: 3px;
font-size: x-small;

<script language="JavaScript">
function showTable() {
document.getElementById("my_table").innerHTML = 
 			'<table cellspacing="0" width=100% border=1>'
+			'<tr style="background-color:orange;color:black; font-family: \'Trebuchet MS\'; font-size: x-small">'
+		'		<th colspan="2" style="padding: 0px;">M_Head_1</th>'
+		'		<th colspan="2" style="padding: 0px;">M_Head_2</th>'
+	'		</tr>'
+'			<tr style="font-family: \'Trebuchet MS\'; font-size: x-small">'
+				'<td>Head_1</td>'
+				'<td>Head_2</td>'
+			'	<td>Head_3</td>'
+		'		<td>Head_4</td>'
+	'		</tr>'
+'			<tr style="font-family: \'Trebuchet MS\'; font-size: x-small">'
+'				<td>772</td>'
+'				<td>512</td>'
+'				<td>8</td>'
+'				<td>2</td>'
+'			</tr>'
+'			</table>';


<div style="border: 0px; width:984px; height: 680px; font-family: 'Trebuchet MS'; font-size: x-small;">
		<div class="portlet" style="width: 35%; height: 10%;" id="my_table">
		<div class="portlet" style="width: 28%; height: 10%;">
		<div class="heading">Box 2 Heading</div>
			<div class="data" style="height: 70%;">
		<div class="portlet" style="width: 28%; height: 10%;">
			<div class="heading">Box 3 Heading</div>
			<div class="data" style="height: 70%;">
<input type="button" value="Show Table" onclick="showTable()">
7 Years
Discussion Span
Last Post by Airshow

I generally avoid inline divs because of effects like this.

Try .portlet { ... float:left; ...} instead.

You may need to set left/right margins to get the correct spacing.

And remember to set whatever comes next in the HTML to clear:left or clear:both to prevent it floating.

If floats won't work for any reason then you can try setting the outer div to position:relative; and absolutely position the three portlet divs inside it.



float:left worked in test code, I will try put that in my actual web site code.


I tried float:left in actual website, but it was not getting displayed in IE, the IE was taking 50% of my CPU and nothing was displayed for long time eventually I had to kill the IE task.

But the website was displayed in Firefox within seconds.

Please help.



There's nothing inherent in floats that should give IE a problem.

It's often said that IE doesn't handle floats properly but I've never known floating to put IE into meltdown. Could be to do with the particular version of IE and/or some interaction with your hardware.

My guess is that the problem is not caused by the floats on their own but by a number of things added together. Heavy "onload" JavaScript is a more likely culprit, though I note you don't have any on your test code.

a) Loading the page in a freshly-launched IE window, as soon as possible after startup. That can make a difference, though it shouldn't (and isn't really a solution).
b) Turning features (such as floats and scripts) on/off to see what combinations cause/cure the problem.


This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.