Issues with margin-top and UL tag

[tech4all]

Ok so I have an a DIV tag with a another div/header inside of it. Inside of that div/header tag I have an UL tag. For the main DIV tag and header I have margin-top: 0px so the outer one is up against the top of the body/browser, and the header DIV tag is also up against the top of that parent DIV tag.

However when I put the UL tag and have that set to a magin-top: xx, it stays at the top and the outer most DIV applies the margin-top of the UL tag to it. Very frustrating.

HTML:

<div id="site-outside-wrapper">
	<div id="header">
    	<img class="logo" src="assets/graphics/logo.gif" />
       	<ul class="nav1">
        	<li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
     	</ul>
        </div>
</div>

CSS:

#site-outside-wrapper {
	position: relative;
	margin-top: 0px;
	width: 700px;
	height: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: black;
	border: 0px solid black;
}

#header {
	position: relative;
	height: 100px;
	margin-top: 0px;
	background-color: red;
	border: 0px solid black;
}

img.logo {
	float: left;
	margin-top:0px;
	margin-left:25px;
}

ul.nav1 {
	position: relative;
	margin-top: 0px;
	margin-left: 400px;
	margin-bottom: 0px;
	padding: 0px;
	border: 1px solid black;
}

ul.nav1 li {
	display: inline;
	border: 1px solid black;
}

Hopefully that makes sense!

 

[Darth.Titan]

I googled this because it had me confused as well. I copied and pasted the below answer from here.

This is normal behaviour (among browser implementations at least). Margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.

To get the behaviour you want, you need:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

 

[mikelegacy]

Do this:

CSS

#site-outside-wrapper {
	position: relative;
	margin-top: 0px;
	width: 700px;
	height: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: black;
	border: 0px solid black;
}

#header {
	position: relative;
	height: 100px;
	margin-top: 0px;
	background-color: red;
	border: 0px solid black;
}

img.logo {
	float: left;
	margin-top:0px;
	margin-left:25px;
}

ul.nav1 {
	position: relative;
	top: 20px;    /* add whatever margins for the UL you want there */
	margin-left: 400px;
	margin-bottom: 0px;
	padding: 0px;
	border: 1px solid black;
}

ul.nav1 li {
	display: inline;
	border: 1px solid black;
}

Why do you have a margin left of 400px? You should be floating things if you are trying to line to create a column style grid...

I want to make a jsfiddle To show you the proper way to do this but I am on my iPad right now. The way you are doing it is far from a best practice for sure

 

[tech4all]

I googled this because it had me confused as well. I copied and pasted the below answer from here.

Thanks for the link. At least now I know what the "issue" is called; collapsed margins.

Do this:

CSS

#site-outside-wrapper {
	position: relative;
	margin-top: 0px;
	width: 700px;
	height: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: black;
	border: 0px solid black;
}

#header {
	position: relative;
	height: 100px;
	margin-top: 0px;
	background-color: red;
	border: 0px solid black;
}

img.logo {
	float: left;
	margin-top:0px;
	margin-left:25px;
}

ul.nav1 {
	position: relative;
	top: 20px;    /* add whatever margins for the UL you want there */
	margin-left: 400px;
	margin-bottom: 0px;
	padding: 0px;
	border: 1px solid black;
}

ul.nav1 li {
	display: inline;
	border: 1px solid black;
}

Why do you have a margin left of 400px? You should be floating things if you are trying to line to create a column style grid...

I want to make a jsfiddle To show you the proper way to do this but I am on my iPad right now. The way you are doing it is far from a best practice for sure

The numbers (and code) aren't final. It was just put there to test things. The logo is on the left (floated and fine-tuned with margins). The navigation will be towards the right.

I'd appreciate any further info you could provide with jsfiddle.