SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Child div moves the parent div

    Hi, I'm setting a div inside a div and I want it to work much like a nested table. My code is below, but setting a margin-top on the child div also moves its parent down. What is causing that?

    Thanks

    HTML Code:
    #background { margin:0 auto; width:1024px; background:#FFF url(images/bg.gif) center repeat-y; min-height:400px; } /* content background */
    #wrapper { margin:0 auto; width:960px; background:#FFF; min-height:300px; margin-top:10px; margin-bottom:10px; position:relative;}/*Content wrapper*/
    
      <div id="background">
        <div id="wrapper">
         Testing 123...
        </div>
      </div>

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, putting a top margin on the child will move the content inside the parent, it's not moving the parent anywhere. Put borders around them to see it's like I'm saying.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Border test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    #background { margin:0 auto; width:1024px; background:#FFF url(images/bg.gif) center repeat-y; min-height:400px; border:1px solid red;} /* content background */
    #wrapper { margin:0 auto; width:960px; background:#FFF; min-height:300px; margin-top:10px; margin-bottom:10px; position:relative; border:1px solid blue;}/*Content wrapper*/
    
    
    </style>
    </head><body>
    
    <div id="background">
      <div id="wrapper">
       Testing 123...
      </div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks noonnope, you're right of course

    There is somethine else strange happening then. If I put the border there, the repeating background in the wrapper div starts at the very top of the div, but if I take away the border, it doesn't start until it gets down to the container div.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BuddyH View Post
    If I put the border there, the repeating background in the wrapper div starts at the very top of the div, but if I take away the border, it doesn't start until it gets down to the container div.
    Hi,
    Actually it is starting in the center but whenever you use repeat-y it will turn around and paint backwards too.

    Here is an example that shows where the reverse repeat does a partial paint at the very top of the div.

    Using background-position with repeat-y

    The BG image on the nested div was shifted to the left to show what is going on.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok thanks. But if it's repeating from centre, it should go all the way to the top of the div right? On my page, the background is only painting back as far as the top of the nested div which has a top-margin of 10px from its parent.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    Actually, putting a top margin on the child will move the content inside the parent, it's not moving the parent anywhere.
    That's not really correct. Putting a top margin on the child will in fact move the parent down by that margin due to collapsing margins.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Border test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *{margin:0;padding:0}
    #background {
        margin:0 auto;
        width:1024px;
        background:red url(images/bg.gif) center repeat-y;
        min-height:400px;
    } /* content background */
    #wrapper {
        margin:0 auto;
        width:960px;
        background:blue;
        min-height:300px;
        margin-top:10px;
        margin-bottom:10px;
        position:relative;
    }/*Content wrapper*/
    </style>
    </head>
    <body>
    <div id="background">
        <div id="wrapper"> Testing 123... </div>
    </div>
    </body>
    </html>
    The child's top margin collapses onto the parent and the parent is moved down as can be seen by the red background. The blue divs margin is gone because it collapsed onto the parent instead.

    Put borders around them to see it's like I'm saying.
    Once you add borders or padding then the model is changed and the margin no longer collapses.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It sounds like your #wrapper's top margin is still collapsing then, did you remove the border from #background?

    If you don't want to use border to un-collapse the child margins you can use padding or overflow:hidden as well.
    Code:
    #background {
        min-height:400px;
        width:1024px;
        margin:0 auto;
        background:#FFF url(images/bg.gif) center repeat-y;
        /*border:1px solid red;*/
        overflow:hidden;/*un-collapse child margins*/
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BuddyH View Post
    Thanks noonnope, you're right of course

    There is somethine else strange happening then. If I put the border there, the repeating background in the wrapper div starts at the very top of the div, but if I take away the border, it doesn't start until it gets down to the container div.

    That's the collapsing margin issue I just mentioned above. Add a 1px top and bottom padding to your parent and that will stop the margin collapse.

    Edit:


    Or overflow:hidden as Ray suggested

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, the 1px padding solved it nicely, thanks. Now reading about collapsing margins.

    Thanks guys

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's not really correct. Putting a top margin on the child will in fact move the parent down by that margin due to collapsing margins.
    Thanks Paul. Always forgetting about that.


Bookmarks

Posting Permissions

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