the following code is dislpayed differently in IE anf firefox ...........

pls help ....i want both to look alike


<head>
<title>TWO-COLUM absolute LAYOUT WITH absolute BOXES</title>
<style type="text/css">
<!--
#id0 {
background-color: #dae9ff;
width: 92.50%;
height: 20.33%;
margin-left: 2.50%;
margin-top: 1.33%;
position: absolute;

}

#id1 {
background-color: #dae966;
width: 20%;
height: 66.67%;
margin-left: 2.50%;
margin-top: 14.5%;
position: absolute;
}

#id2 {
background-color: #dae960;
width: 72%;
moz-width:78%;
height: 66.67%;
margin-left: 23%;
margin-top: 14.5%;
position: absolute;
}
-->
</style>
</head>
<body>
<div id="id0">Header Section</div>
<div id="id1">Left Section</div>
<div id="id2">Content Section</div>

</body>
</html>

I modified your code and IE and Firefox result of the file preview is the same in both browsers. The modified code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TWO-COLUM absolute LAYOUT WITH absolute BOXES</title>
<style type="text/css">
<!--
#id0 {
	background-color: #dae9ff;
	width: 92.5%;
	height: 20.33%;
	margin: 1.33% auto 14.5%;
}

#id1 {
	background-color: #dae966;
	width: 20%;
	height: 66.67%;
}

#id2 {
	background-color: #dae960;
	width: 72%;
	height: 66.67%;
	float: right;
}
#id_wrap {
	width: 92.5%;
	margin-left: auto;
	margin-right: auto;
}
#outerwrapper {
	width: 96.5%;
	margin: 0px auto;
}
-->
</style>
</head>
<body>
<div id="outerwrapper">
<div id="id0">Header Section</div>
<div id="id_wrap">
  <div id="id2">Content for  id "id2" Goes Here</div>
  <div id="id1">Left Section</div>
</div>
</div>
</body>
</html>

I hope this helps.

yup seems solved to me :)

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.