Hi All can anyone help me with this.
I have an outer div that contains three more divs i.e. left, middle and right. The height of left and right are fixed, but the height of the middle div is dynamic depending on the data in it, usually comes from database, so the height of middle div is not fixed. What I want here is to force the borders of left and right divs to be the same as middle. But I am unable to do this. Currently I am using Java script to get the height of middle div and then force others to make them equal which I am not sure is the right way. Can anyone help me with this, using CSS how to make all div's height the same depending on the middle div's height? I know the CSS is loaded first then the contents are loaded, but may be someone has a better idea. Thanks in advance. Here is my code. It is only an example.

Code HTML4Strict:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Height</title>
<style type="text/css">
body
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-align:center;
}
#outer
{
	width:600px;
	height:auto;
	border:1px solid #000000;
	margin:auto;
	overflow:hidden;
}
#left
{
	float:left;
	border:1px solid #0099FF;
	width:150px;
	height:300px;
}
#middle
{
	float:left;
	border:1px solid #FF0000;
	width:300px;
	height:300px;
}
#right
{
	float:left;
	border:1px solid #0099FF;
	width:144px;
	height:300px;
}
</style>
</head>
 
<body>
<div id="outer">
	<div id="left">Left Panel</div>
	<div id="middle">Middle Panel</div>
	<div id="right">Right Panel</div>
</div>
</body>
</html>