CSS Margin Issue

[Ash149]

Hey!

Basically, don’t have a clue what I’m doing wrong here, perhaps I’ve missed something but was wondering if anyone could have a look for me and see what’s going on?

I’ve got a pretty big header on the website I’m doing, and need the logo positioned in the center (horizontally) and about 200/300px from the top of the header..

Here is my code so far:

HTML

The logo

CSS

* {

margin:0;

padding:0;

}



body {

background-color:#000;

}



header {

width:1072px;

height:776px;

background-image:url(images/header-bg.jpg);

margin:0 auto;

}



header h1 {

background-image:url(images/logo.png);

display:block;

width:520px;

height:257px;

text-indent:-9999px;

margin:110px auto;

}

Problem: with the top margin of the h1 set to 110px, it pushes the header down from the top of the view port by 110px also.

I’ve tried: playing around with making the header position:relative; and the header h1 position:absolute which I could get it to work, but I just what the h1 to apear in the center of the page, really without having to absolute position it

I managed to get the h1 down by placing a padding-top:110px; but that then made the height of the h1 higher so don’t really wanna do that.

Don’t understand what’s going on, I was sure that using margin on something only effected that element and pushed it away from elements it was inside of etc?

Any ideas?

Hugely appreciated,

Ashley

[seb_z_lite]

check this out here :
http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down

[seb_z_lite]

guy’s got a theory about the phenomenon!

[seb_z_lite]

forget that.

[wolfcry911]

Its margin collapse and its normal behavior (see this article). There are couple of ways to fix the ‘problem’. You could add a 1px (or any size) top padding or top border to header. Either will give the h1’s margin something to ‘push’ against. Or you could add overflow: hidden; to header (as Paulie_D states above, but probably for a different reason). Setting overflow to anything but the default changes its context and in this case will force the h1 margin to be within the header.

[seb_z_lite]

the body’s top margin collapses and pushes everything down.

[wolfcry911]

the body’s top margin doesn’t come into play here.

[Ash149]

Thanks everyone! Your responses have been excellent!

I ended up making the header relative then absolute positioning h1 but after going through your responses I’ve taken the positions away and just added the display:hidden to the header and it worked fine!

Thanks! :)

[Author]

Posts