Forum Moderators: not2easy
I’m trying to put together a centred layout and I’m having a problem with Mozilla repeating the background colour of the container div. IE displays it perfectly. Is anybody able to help?
body {
background-color: #CCCCCC;
margin: 0px;
font-family: "Trebuchet MS";
font-size: 11px;
}
#header {
background-color: #FFFFFF;
height: 50px;
width: 500px;
margin-right: auto;
margin-left: auto;
}
#container {
background-color: #66FFCC;
width: 500px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
height: auto;
left: 157px;
top: 49px;
}
#left {
float: left;
height: auto;
width: 300px;
background-color: #666666;
margin: 0px;
}
#right {
background-color: #990000;
margin: 0px;
float: right;
height: auto;
width: 180px;
}
#footer {
background-color: #9966CC;
height: 20px;
width: 500px;
margin-right: auto;
margin-left: auto;
float: left;
}
<!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>Layout Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="left">
Text to go here
</div>
<div id="right">
Text to go here
</div>
<div id="footer"></div>
</div>
</body>
</html>
A quick fix for this is to put this:
#clear{clear:both;}
in your stylesheet, and this :
<div id="clear"></div>
just below your right div.
I think you should have no problem then (though I have been wrong before).
I hope this helps.
Cheers
