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

HTML, CSS Child DIV

Ok, this is kind of stupid, but I can't see what I'm doing wrong.

I have two divs.  One called "wrapper", the other is called "main_sec."

I want the main_sec to be inside the wrapper, centered and 40px from the top of it.

Here's my code:

<!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>WTF</title>

<style>
	#wrapper{
margin-top:40px;
		position:relative;
		width:1100px;
		height:1000px;
		margin-left:auto;
		margin-right:auto;	
		background-color:#999;

	}

	
	#main_sec{
		position:relative;
		margin-top:40px;
margin-left:auto;
margin-right:auto;
		width:926px;
		height:250px;
		background-color:#333;
	}
</style>
</head>
<body>
	<div id="wrapper">
    	<div id="main_sec">hello</div>
    </div>

</body>
</html>

Open in new window


No matter what I do, the main_sec div is right at the top of the wrapper div.  For the life of me, I can't figure out what I'm doing wrong.

Any suggestions?  Thanks for the help!
0
slightlyoff
Asked:
slightlyoff
  • 3
  • 3
  • 2
2 Solutions
 
QPRCommented:
What browser are you using? looks fine in IE9
0
 
slightlyoffAuthor Commented:
i'm on a mac, looking at Safari, Fire Fox & Chrome.  Haven't tried it in IE9 yet.
0
 
QPRCommented:
apologies it doesn't look ok in IE - it did in my coding program but when I previewed I got the same as you.
It appears to be because there is no content in the outer div. As soon as I put ABC into the wrapper div then the margin appeared as you wanted
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
QPRCommented:
I got the same behaviour in firefox too - no content in the outer div and the inner divs top margin is ignored
0
 
käµfm³d 👽Commented:
Have you considered using top padding on the #wrapper <div> instead of top margin on the #main_sec <div>?
0
 
slightlyoffAuthor Commented:
Is that normal?  I guess I've never noticed it before.  I don't want any text in the wrapper div, i just want it to contain my other divs.

thanks for your quick replies by the way :)
0
 
käµfm³d 👽Commented:
I believe this page discusses the behaviour you are seeing:  http://reference.sitepoint.com/css/collapsingmargins
0
 
slightlyoffAuthor Commented:
Thank you for your help! i'll take a look at that page.  The padding does the trick.<br /><br />Thanks again!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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