Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS h1 top-margin bumping down <div>

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #24918
    skater102
    Member

    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;}
    #57951
    cssfreak
    Member

    Add the following code to your css

    Code:
    body
    {
    margin:0px;
    }

    Enjoy With CSS

    #57956
    skater102
    Member

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

    Code:
    body{
    margin:0;
    padding:0;
    }
    #57958
    cssfreak
    Member

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

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

    #57980
    AshtonSanders
    Participant
    "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 =/

    #58020
    skater102
    Member

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

    #102356
    petrchutny
    Member

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

    #102360
    Allen Lawson
    Participant

    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.

    #102367
    wolfcry911
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.