Setting margins of divs inside of divs

HTML & CSS
1

I’m trying to give my logo div a margin inside of the header div but when I do it pushes the both header and logo divs down from the top of the page

Here’s my code:

HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css" href="css/style.css" />


<title>Project</title>

</head>



<body>




<div id="content">

	<div id="header">
		<div id="logo"></div>
	</div>
	
	<div id="nav"></div>
	
	<div id="imageSlider"></div>
	
	<div id="subscribeArea"></div>
	
	<div id="menuLeft"></div>
	
	<div id="thumbsArea">
		<div id="thumbsTitle"></div>
		<div id="thumbs">h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h<br/>h</div>
	</div>

</div>

<div id="bottom"></div>




</body>

</html>

CSS

body{
	background-color:#e8e9e9;
}

#content{
	width:920px;
	height:auto;
	margin:0 auto;
	background-color:red;
}

#header{
	height:170px;
	width:920px;
	background-color:blue;	
	
}

#nav{
	height:45px;
	width:920px;
	background-color:orange;
	

}

#imageSlider{
	height:225px;
	width:682px;
	background-color:yellow;
	float:left;
	margin-top:24px;
}

#subscribeArea{
	height:224px;
	width:222px;
	background-color:green;
	float:right;
	margin-top:24px;
	margin-left:16px;
}


#menuLeft{
	height:289px;
	width:194px;
	background-color:red;
	margin-top:24px;
	clear:both;
	float:left;	
}


#thumbsArea{
	height:auto;
	width:685px;
	background-color:yellow;
	margin-top:24px;
	margin-left:41px;
	float:right;	
}



#thumbsTitle{
	height:36px;
	width:685px;
	background-color:purple;
	
}

#thumbs{
	height:auto;
	width:685px;
	background-color:blue;
	margin-top:24px;
	margin-left:41px;
	float:right;	
}

#bottom{
	height:260px;
	width:100%;
	background-color:green;
	float:left;
	margin-top:24px;	
}

#logo{
	height:104px;
	width:197px;
	background-image:url('../images/logo.png');
	background-repeat:no-repeat;
	margin-top:3px;
	display:block;

}

Can someone help me with this.

Thanks

2

That’s caused by “collapsing margins”. A simple way to fix it is by adding a top border:

#header{
	height:170px;
	width:920px;
	background-color:blue;
	[COLOR="#0000FF"]border-top: 1px solid blue;[/COLOR]	
}
3

Exactly. Padding will work just as well (handy when you have a bg image and don’t want to cover it up).

I did want to note that if you use either method and the HEIGHT of your element is important in your layout… you have to recalculate it to include the padding or border.


#header{
[COLOR="#FF0000"]	height:169px;[/COLOR]
	width:920px;
	background-color:blue;
[COLOR="#FF0000"]	border-top: 1px solid blue;	[/COLOR]
}