Cant add margin to div

HTML & CSS
1

I cant add a margin-top to my footer div to give space between the siteWrapper div and itself. Is this something to do with margin collapse? This keeps happening to often so I want to find out whats going wrong so I dont keep running into to the same problem in the future.

HTML

<!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"
	lang="en"
	xml:lang="en"
>
<head>

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

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="css/reset.css"
	media="screen,projection,tv"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="css/style.css"
	media="screen,projection,tv"
/>

<title></title>

</head>



<body>

<div class="siteWrapper">
	
	<div id="header">

		<img src="images/logo.gif" alt="Logo"/>

		<ul id="nav">
			<li class="navItem"><a href="#">Home</a></li>
			<li class="navItem"><a href="#">Quote Me</a></li>
			<li class="navItem"><a href="#">Excursions</a></li>
			<li class="navItem"><a href="#">Holidays</a></li>
			<li class="navItem"><a href="#">Fleets</a></li>
			<li class="navItem"><a href="#">Depots</a></li>
		</ul>

	</div>

	<div id="mainContent">
	
		<div id="contentLeft">



			<h1>Latest</h1>

			<div class="post">

				<ul>
					<li class="thumb"><img src="images/thumb2.png" alt="Post 1"/></li>
					<li class="title"><h2>BLACKPOOL & ILLUMINATIONS - £15.75</h2></li>
					<li class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta dignissim nisl, vel tempor turpis placerat non. Nulla facilisi. Cras in leo quis lacus aliquet eleifend non tincidunt nisi. Cras sed rhoncus justo. Nulla facilisi. Nulla quam erat, molestie sed blandit sed.</p></li>
				</ul>
				

			</div>



			<div class="post">

				<ul>
					<li class="thumb"><img src="images/thumb2.png" alt="Post 1"/></li>
					<li class="title"><h2>BLACKPOOL & ILLUMINATIONS - £15.75</h2></li>
					<li class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta dignissim nisl, vel tempor turpis placerat non. Nulla facilisi. Cras in leo quis lacus aliquet eleifend non tincidunt nisi. Cras sed rhoncus justo. Nulla facilisi. Nulla quam erat, molestie sed blandit sed.</p></li>
				</ul>
				

			</div>





		</div>

		<div id="contentRight">


			<div id="tweetsContainer"></div>



		</div>


	</div>

</div>

<div id="footer"></div>

</body>


</html>

CSS

@font-face { 
	font-family: Trebuchet; src: url('../trebuc.ttf'); 
	font-family: TrebuchetBold; src: url('../trebucbd.ttf');

} 

body{
	background-image:url('../images/bg.png');
	background-repeat:repeat-x;
	font-family:Trebuchet, Arial, sans-serif;
	color:#222222;
}

h1{
	font-size:35px;
	font-family: TrebuchetBold;
	padding: 0 0 50px 0;
	color:#94bdbd;
	text-shadow: 0px 1px #505050;
	
}



.siteWrapper{
	margin:0 auto;
	width:960px;
	
}







#header{
	height:260px;
	
}


#header img{
	display:block;
	margin:0 auto;
	text-align:center;
	padding-top:60px;
	
}








#nav{

	margin:0 auto;
	width:580px;
	margin-top:70px;
	
}

.navItem{
	display:block;
	float:left;
	padding:0 20px 0 20px;
	

}

.navItem a{
	color:#222222;
	text-decoration:none;
}

.navItem a:hover{
	border-bottom:1px solid #ffc200;
}










#mainContent{
	margin-top:45px;
	

}






#contentLeft{
	width:600px;
	float:left;
	
}

.post{
	height:122px;
	padding-top:30px;
	
	
}

.thumb{
	height:106px;
	width:106px;
	float:left;
	
}

.title{
	float:right;
	width:475px;
	
}

.title h2{
	font-size:17px;
	
	
}

.info{
	float:right;
	width:475px;
	padding:12px 0 0 0px;
	
}

.info p{
	font-size:13px;
	line-height:16px;
	color:#6e6e6e;
	text-align:justify;
	
	
}









#contentRight{
	width:330px;
	float:right;
	
	
}


#tweetsContainer{
	width:252px;
	height:432px;
	background-image:url('../images/tweetsBg.png');
	float:right;
	
}










#footer{
	background-image:url('../images/footerBg.png');
	height:220px;
	clear:both;
	margin-top:50px;
	
}

Also is you see any other problems please correct me on it, thanks.

2

Try adding overflow:hidden to siteWrapper. I am wondering if it has something to do with the floats in relation to the outside wrapper.

3

Thank you, that seems to have worked.

4

Great, glad it worked. Here is a bit of reading to know why that happened and what to look for in the future. I always like to know why, because it helps me think critically in the future:

http://www.visibilityinherit.com/code/contain-floats.php

5

I’ll take a look, thanks.

6

The reason the margin on the footer doesn’t take effect is because you haven’t contained the floats within the parent as sdt76 rightly suggests. This means that above the footer is only floated content. Floats are removed from the flow so the margin top on your footer now just slides under the float and has no effect. If you had placed a really large top margin on the footer then eventually it would hit the containing block and start pushing the footer down once again. Of course that’s not a solution because the floats could be varying sizes.

The solution is to contain the floats within sitewrapper and then the top margin on the footer hits the bottom of sitewrapper because it has now encompassed its floated children.

If there was no parent around the floats and you wanted following content to be pushed away then you should use a bottom margin on the float instead as floats always obey their margins and do not collapse.

Borders, backgrounds and margins on static content will slide under a float as if the float wasn’t there. A float makes room for itself by repelling the foreground content (such as text and images) out of the way but does not repel the background. The original static element in effect is still in the same place it always was as if the float wasn’t there but with its foreground content pushed out of the way to make way for the float.