Forum Moderators: not2easy
then at the bottom an image with a left negative margin. This margin causes the right side of the container to push outwards, as if there's white space at the right side of the image.
Any help please? and an explanation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
#container {
background-color: red;
margin: auto;
width: 600px;
}
#content {
padding: 10px;
}
#img {
margin-left: -10px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="header">Header comp</div>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<img id="img" src="Untitled-2.gif" width="600" height="200" alt="" />
</div>
</div>
</body>
</html>
can hopefully help but not explain properly, except to say it does not happen in IE7, so it's somehow part of the quirks that were fixed
#img {
margin: 0 -10px;
}
i.e. give both sides negative margins, or add
overflow:hidden;Suzy
