h1 top-margin bumping down <div>

[skater102]

I am working on a site and am using an h1 one for the logo. I am using some top margin to align it correctly but it is causing the header div it is contained within to move down entirely. I thought it would just align the h1, but the whole div is moving down from the top of the page instead, and the h1 is staying at the top of the page. Here is the code, everything is contained within a wrap div.
The html:

Code:

My Site

The CSS applied to it:

Code:

#header{
background: #86C0EF;
padding:10px 5px;}
#header h1 {
margin:50px 0 0 0;
color:#000;}

[cssfreak]

Add the following code to your css

Code:

body
{
margin:0px;
}

Enjoy With CSS

[skater102]

Thanks for the reply, but I already am using a css reset file which includes

Code:

body{
margin:0;
padding:0;
}

[cssfreak]

are u sure u have included that and it still doesn’t work ????

can u provide a live link or atleast a screenshot ??

[AshtonSanders]

"skater102" wrote:

I am using some top margin to align it correctly but it is causing the header div it is contained within to move down entirely.

Yea… super annoying, isn’t it? I don’t actually know what causes that (anyone know?), but it does happen. Have you tried using padding on the H1 instead of margin? you can also try giving the Image padding-top or margin-top.

I just handle it by doing it another way =/

[skater102]

Yeah, I tried padding and it fixed the problem. Thanks so much for the help folks.

[petrchutny]

Happend to me too, I don’t kinda get it.

[Allen Lawson]

There is a simple fix for this.

Here’s the deal: the header is acting as a parent element to the h1 in a way. If you give #header a position of relative then you should be able to play around with where the h1 goes by also giving in a position. Check out Chris’s video on positioning for CSS

https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

Other than that, just make sure there is no properties block the h1 from being located where you want it.

[wolfcry911]

First, the header moving down is correct behavior. Its the way margins collapse. The h1 top margin protrudes out from the top of the parent.
Now, there’s a number of ways to get what you want. The position: relative suggestion above will work if you want to get into absolute positioning of the h1, but it’s not needed here. One way is to give the header div either a top padding or top border (of any amount but 1px will work). This gives the h1’s margin something to ‘push’ against. Another way is to set overflow: hidden; on the header div. What this does is change it’s Block Formatting Context and the margins will react in a different manner.

[Author]

Posts