Div problem in firefox

Hi All,

I am working with div based layout, now the problem is div’s are behaiving differently in firefox/IE.

IE is perfect with my code, I want same in firefox.

my code is below,


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<title>Untitled Document</title>
</head>
<body>
<div style=“float:left; width:250px; height:auto; background-color:#FFFF00; z-index:auto;”>
<div style=“position:inherit; float:left; width:200px; height:27px; background-color:#FF00dd; z-index:auto; overflow:hidden;”>
<div style=“position:relative; float:left; width:140px; height:auto; background-color:#da00ff; z-index:2; overflow:visible !important;”>Sub layer 1 relative<br>Sub layer 1 relative<br>Sub layer 1 relative<br></div>
</div>
<div style=“position:inherit; float:left; width:200px; height:27px; background-color:#ffaadd; z-index:auto; overflow:hidden;”>layer 2 relative</div>
<div style=“position:inherit; float:left; width:200px; height:27px; background-color:#ffbbdd; z-index:auto; overflow:hidden;”>layer 3 relative</div>
<div style=“position:inherit; float:left; width:200px; height:27px; background-color:#ffccdd; z-index:auto; overflow:hidden;”>layer 4 relative</div>

</div>
</body>
</html>

Please let me know, if anyone have solution for this.

Thanks
Chinu