asked on

CSS: How do I deal with these unwanted margins between header/content/footer?

Hello,
I have content in my content section that I gave an extra margin. That's cool, but now those margins are adding an extra gap between the header/content, and content/footer. Eww! This is probably something really simple, but I can't see it at the moment. Even without the added style="margin: 50px;" in the div surrounding the paragraph, I still have the issue with the tag on its own (leading me to adding a margin to see what would happen). This occurs in FireFox and Safari, haven't tried IE yet. Any thoughts? Thanks much for the assist in advance! :)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HELP!</title>
 
<style type="text/css">
body, html {
	padding: 0px;
	margin: 0px;
	background-color: #3C0000;
}
 
#header {
	background: #FF9900;
	height: 137px;
}
 
#headerCenter {
	width: 866px;
	height: 137px;
	background: #FF9999;
	margin: auto;
}
 
#content {
	background-color: #FFFF33;
}
 
#contentCenter {
	width: 866px;
	background: #FFFFFF;
	margin: auto;
}
 
#footer {
	background: #FF9900;
	height: 137px;
}
 
#footerCenter {
	width: 866px;
	height: 137px;
	background: #FF9999;
	margin: auto;
}
 
</style>
 
</head>
<body>
 
<div id="wrapper">
	
	<div id="header">
		<div id="headerCenter">
			&nbsp;
		</div>
	</div>
	
	<div id="content">
		<div id="contentCenter">
			
			<div style="margin: 50px;">
				<p>Notice the dark red gap above and below this white box. How do I close the gaps?</p>
			</div>
			
		</div>
	</div>
	
	<div id="footer">
		<div id="footerCenter">
			&nbsp;
		</div>
	</div>
</div>
 
</body>
</html>

Open in new window

Fero45

delete ... because it creates a paragraph and adds automatically some space above and some below

Ultrus

ASKER

That's true I could do that. I guess it just seems odd because my margins inside one box are affecting the margins/spacing outside another box. If I don't find a better answer I'll give you the credit of course, but here's what I have working so far since my last post:

Update:
If I change the margin to padding, everything looks ok. Since my actual design has 20px of padding planned for the content area, Any paragraph content should not cause issues (thumb of concept attached). I just need to check my header tags and whatnot. I'm still open to suggestions if you have them. Thanks again.
conceptThumb.jpg

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Fero45

try using firefox and install Web Developer add-on. Than click on "Info dvisions" It will show you the color boxes and divisions, how they overlap. You will clearly see that pushes the divisions up and down

Ultrus

ASKER

Those resources were helpful. Extra padding it is! I didn't want to remove the tags (or remove the margin from them), so this solution worked the best and my design is looking good on all major browsers so far. Thanks!