Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    top margin gets applied to a parent div instead

    Hi

    Could someone help me. If you can have a look at this link http://www.juanchandler.com/test2.html (the CSS is all in the head of the document rather than in an external file so you can just view source)

    As you can see I've applied a 30px top margin to the div with the ID of "logo" but it ends up getting applied to the main container div ("header"). This has happened to me before and I don't know why.

    Here's a much simpler version http://www.juanchandler.com/test1.html (again CSS is in the head of the document) but the problem doesn't occur this time.

    The problem can be solved by using top padding to the containing div rather than a top margin for the div in question but I should have a better understanding of why the problem occurs in the first place.

    If anyone can help please.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    This is part of the beast known as "collapsing margins":

    http://www.w3.org/TR/CSS21/box.html#collapsing-margins
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    It is getting added to the correct div. If you want to add a 30px margin to just the text, then add it to the h2 tag. Then your wrapper will remain at the very top of your view port.

    Do you use firebug for firefox? You should download this free tool and this will help you spot issues like this.

    Also, you should do some reading on the box model here.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by teedoff View Post
    ...If you want to add a 30px margin to just the text, then add it to the h2 tag. Then your wrapper will remain at the very top of your view port...
    I don't believe that this is true (or at least it shouldn't be, according to the standards). The solutions I can think of off-hand are switching to padding, using a border, or setting an overflow value (scroll, auto, or hidden) for #header.

    Any top margins in this case should roll up and push the entire header section down as far as I know...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Actually, the border or overflow would be set for #pattern for best results here, but either one will get #header back up to the top of the page...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Rowsdower! View Post
    I don't believe that this is true (or at least it shouldn't be, according to the standards). The solutions I can think of off-hand are switching to padding, using a border, or setting an overflow value (scroll, auto, or hidden) for #header.

    Any top margins in this case should roll up and push the entire header section down as far as I know...
    I actually meant to say padding instead of margin. Add padding to the h2 tag would work. I thought thats the result he wanted, but if not then disregard what I suggested.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    No, I think you're right about the result the OP wanted. It was just the use of margins in your solution that threw me off.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    juanc (12-20-2010)

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I stay thrown off...lol

  • Users who have thanked teedoff for this post:

    juanc (12-20-2010)

  • #9
    New Coder
    Join Date
    Aug 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    A big thank you to you both for your help here. It's been of benefit to me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •