Member Avatar for rdhiravani

Hi,

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">
<html>
<head>
<title> New Document </title>
<style>
.portlet {
font-family:trebuchet ms; 
border: solid gray 1px;
display: inline;
text-align: left;
margin: 1%;
}

.portlet div.heading {
background-color:orange;
color:black;
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;
}

</style>
<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>';

}
//-->
</script>
</head>

<body>
<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>
 
		<div class="portlet" style="width: 28%; height: 10%;">
		<div class="heading">Box 2 Heading</div>
			<div class="data" style="height: 70%;">
			</div>
		</div>
 
		<div class="portlet" style="width: 28%; height: 10%;">
			<div class="heading">Box 3 Heading</div>
			
			<div class="data" style="height: 70%;">
			</div>
		</div>
<input type="button" value="Show Table" onclick="showTable()">
	</div>
</body>
</html>
  • 2 Contributors
  • 5 Replies
  • 96 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for 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.

Airshow

Member Avatar for rdhiravani

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

Member Avatar for rdhiravani

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.

Member Avatar for Airshow

Rdhiravani

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.

Try:
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.

Airshow

Member Avatar for Airshow

Another thought, you could try a different !Doctype. It's just possible that it could make a difference.

eg:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.