Forums

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:


<div id=\"header\">
    <h1>My Site</h1>
</div>

The CSS applied to it:


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

cssfreak

Add the following code to your css


body
{
margin:0px;
}

Enjoy With CSS

skater102

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


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" said:
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.

AllenLawson

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

http://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.

treehouse : what would you like to learn today?

Forums

h1 top-margin bumping down