The code below renders differently in FireFox than it does in IE7. What I see in IE7 is (almost) what I want: a centred page with a top banner strip and trailing strip which are both the full width of the centred page. In the middle there should be two large boxes side by side - one narrow one that will contain the menu and one much wider that will contain the main content.
Firefox would appear to start the trailer box (but not its content) at a point that overaps the two adjacent (menu & content) boxes. Any suggestions as to why the browsers are behaving differently and how I might correct the code to make behaviour consistent?
Many thanks.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Test</title>
<style type="text/css">
div.PnlFullPage { background-color:ButtonFace; text-align:center}
div.PnlUsableArea { background-color:white; width:800px; border: solid 1px gray; margin:0px auto; }
div.PnlBanner { height:109px; width:100%; border: solid 1px gray; }
div.PnlVariableContent { background-color:white; width:100%; text-align:left; height:auto; }
div.PnlMenu { width:130px; border-right: solid 1px gray;
height:550px; float:left; }
div.PnlContent { float:left; width:658px; padding:5px; height:550px; }
div.PnlTrailer { margin-top: 10px; border-top:solid 1px gray; background-color:pink;
float:none; width:800px; height:auto; }
</style>
</head>
<body>
<div class="PnlFullPage">
<div class="PnlUsableArea">
<div class="PnlBanner">
</div>
<div class="PnlVariableContent">
<div class="PnlMenu">
</div>
<div class="PnlContent">
</div>
</div> <!--End of PnlVariableContent-->
<div class="PnlTrailer">
<p>Unauthorised use and reproduction is strictly prohibited.</p>
</div>
</div> <!--End of PnlUsableArea-->
</div> <!--End of PnlFullPage-->
</body>
</html>Many thanks.