Grow your CSS skills. Land your dream job.

h1 top-margin bumping down <div>

  • # May 22, 2009 at 4:38 am

    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:

    The CSS applied to it:

    Code:
    #header{
    background: #86C0EF;
    padding:10px 5px;}
    #header h1 {
    margin:50px 0 0 0;
    color:#000;}
    # May 22, 2009 at 5:24 am

    Add the following code to your css

    Code:
    body
    {
    margin:0px;
    }

    Enjoy With CSS

    # May 22, 2009 at 6:42 am

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

    Code:
    body{
    margin:0;
    padding:0;
    }
    # May 22, 2009 at 7:03 am

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

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

    # May 22, 2009 at 3:45 pm
    "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 =/

    # May 23, 2009 at 6:41 am

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

    # May 5, 2012 at 10:38 am

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

    # May 5, 2012 at 3:06 pm

    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.

    # May 5, 2012 at 6:37 pm

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".