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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Parent div moves when i change child div's margins ?

    i have a <div> inside another <div>

    I want the parent div to stay exactly where it is, and the child div to be inside it but with a 20px margin from the top.

    But when I add the 20px margin, the parent div moves downwards by 20px so the child div is still at the very top edge.


    Example of what is happening is here: http://www.eionbryant.com/test.html


    I want the green area "#wrap" to be flush with the purple strip... and the grey area "#boxes" to begin inside the green area 20px down.


    I am learning css, so i would prefer someone explained how I am doing it wrong, rather than offering some work around.

    cheers

    Code:
    <body>
    
    <div id="strip"> </div>
    
    
    <div id="wrap">
    
    	<div id="boxes"> </div>
    
    </div>
    
    </body>
    
    </html>

    Code:
    body {background:#FFFFF; font-family:"Trebuchet MS", Times, serif; padding:0; margin:0; position:relative;  }
    
    #strip {background:#663366; width:100%; height:10px; padding:0; border:0;}
    
    #wrap {background:#00FFCC; width:100%; height:700px; margin:0 auto; }
    
    
    
    #boxes {background:#666666; margin: 20px auto; width:800px; height:200px; clear:both;}

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You aren't doing anything wrong. That's just how it works in that instance. It has to do with how margins collapse when there's one on top of the other and it affects child elements also.

    The way around it is to add a border to "wrap" of, say, 1px and make it the same as the background color or transparent.

  • Users who have thanked drhowarddrfine for this post:

    jbjbjb (11-14-2009)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow, Thanks.

    The way that positioned css is formatted by a browser seems very strange and illogical to me..Like do I always need to add a border for Div to stay positioned?.. is there somewhere that has some good info that I can read to get my head around such things?
    Last edited by jbjbjb; 11-14-2009 at 08:51 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    As explained above you are experiencing collapsing margins, which is default behaviour.

    There are many triggers to prevent collapsing margins, borders being one of them, but the most commonly used one is to add:

    overflow:auto;

    to the parent DIV

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Or you may set a padding-top on the container instead of margin-top on the child.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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