Gaps between divs

[benjaminmorgan]

I have a layout, I can't remember what to do to fix it and google hasn't been any help. Here is an image of what its doing.

 

Here is my code

 

HTML

<div class="header">
<div class="container">
	<p style="float: left;" class="whitet">Logo here</p>
	<p class="whitet" style = "float: right;">CONTENT HERE</p>
</div>
</div>
<div class="process">
<div class="container">
	<p class="whitet" style="font-size: 12px;padding-top: 200px;">Here is some content right here<br>Here is some more content in this very spot</p>
</div>
</div>
<div class="content">
<div class="container">
<div>		
<p class="whitet">content here</p>
</div>
</div>
</div>

 

CSS

 body {
margin: 0 auto;
font-family: Tahoma, sans-serif;
}

.container {
width: 960px;
margin: 0 auto;
padding-top:0px;
padding-bottom: 0px;	
margin-top:0px;
margin-bottom: 0px;


}
.header {
background: black;
height: 100px;
}


.process {
height: 300px; 
background: green;
}

.content {
height: 500px;
background: red;
}




.whitet {
color: white;
}

 

 

ALSO it isn't there when I remove the p tags but I kindof need them for content.

Edited May 12, 2012 by benjaminmorgan

[benjaminmorgan]

Nevermind, it works if I add * {padding: 0px; margin: 0px;}

 

Can't believe I forgot the CSS reset.

Edited May 12, 2012 by benjaminmorgan

[Andrea]

1336857700[/url]' post='32279']

Nevermind, it works if I add * {padding: 0px; margin: 0px;}

 

The miracle cure

[falkencreative]

Just so you are aware, the gaps were caused by the margins on the p tags -- adding the * reset fixed that because it removed those margins. Another way to handle it, I believe, would be to add overflow:hidden; to the divs so they properly enclose the p tags.

[benjaminmorgan]

Thanks Ben, I normally just use the reset to take off the margins because i always have problems with heading tags so i just style them myself.