Margin pushing wrong div?

TomBower

08-06-2010, 03:17 PM

<!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" xml:lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #E2E2E2 fixed;
}
#header {
width: 942px;
height: 72px;
margin: 0 auto;
padding: 0;
background: black;
}
#header #logo {
width: 182px;
height: 40px;
margin: 17px 0px 0px 40px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>

</body>
</html>

Why does the header div also go down with the logo div? How can I stop this from happening? (The colours will be replaced by images) I want the logo div to be pushed down inside the header div...

Image:
http://www.uploadir.com/u/21410dce
http://www.uploadir.com/u/21410dce

SB65

08-06-2010, 06:50 PM

Remove the 17px top margin on #logo and instead apply a 17px padding-top to #header. That'll push the #logo div down like you want it.

Taraes

08-08-2010, 07:21 AM

<!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" xml:lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #E2E2E2 fixed;
}
#header {
width: 942px;
height: 72px;
margin: 0 auto;
padding-top: 17px;
padding-left: 40px;
background: black;
}
#logo {
width: 182px;
height: 40px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>

</body>
</html>

This seems to work :)