top margin gets applied to a parent div instead

Hi

Could someone help me. If you can have a look at this link http://www.juanchandler.com/test2.html (the CSS is all in the head of the document rather than in an external file so you can just view source)

As you can see I've applied a 30px top margin to the div with the ID of "logo" but it ends up getting applied to the main container div ("header"). This has happened to me before and I don't know why.

Here's a much simpler version http://www.juanchandler.com/test1.html (again CSS is in the head of the document) but the problem doesn't occur this time.

The problem can be solved by using top padding to the containing div rather than a top margin for the div in question but I should have a better understanding of why the problem occurs in the first place.

If anyone can help please.

This is part of the beast known as "collapsing margins":

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

It is getting added to the correct div. If you want to add a 30px margin to just the text, then add it to the h2 tag. Then your wrapper will remain at the very top of your view port.

Do you use firebug for firefox? You should download this free tool and this will help you spot issues like this.

Also, you should do some reading on the box model here (http://www.w3schools.com/css/css_boxmodel.asp).

...If you want to add a 30px margin to just the text, then add it to the h2 tag. Then your wrapper will remain at the very top of your view port...

I don't believe that this is true (or at least it shouldn't be, according to the standards). The solutions I can think of off-hand are switching to padding, using a border, or setting an overflow value (scroll, auto, or hidden) for #header.

Any top margins in this case should roll up and push the entire header section down as far as I know...

Actually, the border or overflow would be set for #pattern for best results here, but either one will get #header back up to the top of the page...

I don't believe that this is true (or at least it shouldn't be, according to the standards). The solutions I can think of off-hand are switching to padding, using a border, or setting an overflow value (scroll, auto, or hidden) for #header.

Any top margins in this case should roll up and push the entire header section down as far as I know...

I actually meant to say padding instead of margin. Add padding to the h2 tag would work. I thought thats the result he wanted, but if not then disregard what I suggested.

No, I think you're right about the result the OP wanted. It was just the use of margins in your solution that threw me off. :thumbsup:

I stay thrown off...lol

A big thank you to you both for your help here. It's been of benefit to me.