I'v egot a small problem with a layout I'm working on and it views fine in Internet Explorer but messes up in Firefox and Netscape.

My Code is:
Code:
<!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>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
	margin: 15px 0px 0px;
	padding: 0px;
	text-align: center;
}
#topcontainer {
	width: 760px;
	margin: 0px auto 5px;
	padding: 0px;
}
#headerbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: center;
}
#maincontainer {
	width: 760px;
	margin: 0px auto;
	padding: 0px;
}
#leftcolumn {
	float: left;
	width: 160px;
	padding: 5px;
}
#searchbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: left;
}
#centrecolumn {
	float: left;
	width: 430px;
	padding: 5px;
}
#contentbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: left;
}
#rightcolumn {
	float: left;
	width: 140px;
	padding: 5px;
}
#statbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: left;
}
#bottomcontainer {
	width: 760px;
	margin: 5px auto 0px;
	padding: 0px;
}
#footerbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: center;
}
-->
</style>
</head>

<body>
<div id="topcontainer">
  <div id="headerbox">Header Box Content</div>
</div>
<div id="maincontainer">
  <div id="leftcolumn">
    <div id="searchbox">Search Box Content</div>
  </div>
  <div id="centrecolumn">
    <div id="contentbox">Content Box Content</div>
  </div>
  <div id="rightcolumn">
    <div id="statbox">Stat Box Content</div>
  </div>
</div>
<div id="bottomcontainer">
  <div id="footerbox">Footer Box Content</div>
</div>
</body>
</html>
The footer box overlaps the content in the main container in firefox and netscape. Any suggestions for a fix?

Kind regards
Norrad