• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 310
  • Last Modified:

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 <p> 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

0
Ultrus
Asked:
Ultrus
  • 2
  • 2
1 Solution
 
Fero45Commented:
delete <p> ...</p> because it creates a paragraph and adds automatically some space above and some below
0
 
UltrusAuthor Commented:
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 <p>paragraph content</p> 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
0
 
David S.Commented:
You're experiencing collapsing margins (http://www.dynamicsitesolutions.com/css/layout-techniques/#collapsing_margins). IE5-7 often handle those incorrectly. One way to fix that is to give #contentCenter or #content a little top and bottom padding.

I also recommend you read this: http://www.dynamicsitesolutions.com/blog/2008/12/10-things-you-might-not-know-about-using-css/
0
 
Fero45Commented:
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 <p> pushes the divisions up and down
0
 
UltrusAuthor Commented:
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!
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now