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 to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Parent div won't contain unruly children

    I feel like such a 2nd grader.

    Goals:

    1) Container div parent that will contain two other divs (child1 and child2)
    2) 20px space between the 2 child divs and each other
    3) 20px space between the 2 child divs and the parent div
    4) parent sits in the document flow and has stuff above and below it

    What I don't understand:

    In CASE 1 below (using margin), child1 seems to ignore the empty parent and flows up above it, but in CASE 2, it respects it and is contained by it. It clearly relates to the "emptiness" of parent...but why does the emptiness not matter in CASE 2?

    CONTENT:

    <div id="parent">
    <div id="child1">
    /* stuff goes here */
    </div>
    <div id="child2">
    /* stuff goes here */
    </div>
    </div>


    CSS CASE 1
    :

    #child1 {
    height: 100px;
    margin: 20px;
    }

    #child2 {
    height: 50px;
    }


    CSS CASE 2:

    #child1 {
    height: 100px;
    padding: 20px;
    }

    #child2 {
    height: 50px;
    }

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    sounds like margin collapsing

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You're absolutely right. I float (no pun intended) in and out of CSS to infrequently to remember stuff like that.

    I'm 100% certain there's a really good reason margin collapse exists. My brain just conveniently chooses to not let me remember why.

    Thanks for the quick answer.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    891
    Thanks
    0
    Thanked 117 Times in 116 Posts
    The thing to remember is:
    margins are outside the elements borders, while
    paddings are inside the elements borders.

    Hence margins are related to its parent element
    while paddings are related to its child element(s).

  • Users who have thanked Lerura for this post:

    logical_c (08-31-2010)

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the follow-up. I get the box model and the basic difference between margin and padding.

    It's the not-so-obvious peripheral behavior that usually gets me.

    For example, I was just setting up a mockup for a new site. I just put container divs for each section of the page and then a child div to represent the content that will reside there (each with a solid colored background). But if all of the child "boxes" in a div are floated, the height of the parent div goes to zero.

    Doesn't make sense to me why, but it collapses. I found that if I set overflow to hidden in the parent div, it expands to contain the kids as it should.

    But I'm getting off-topic....

    Thanks!

  • #6
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    But if all of the child "boxes" in a div are floated, the height of the parent div goes to zero.
    floating takes the element out of the flow of the document.

    the parent div no longer is aware of any content inside it, hence why the "height" goes to zero.

    simply add "overflow:auto; (or hidden, as you discovered)" to the parent div to clear the floats in an easy and elegant way

    you can also use a variety of other ways to "clear floats" - google for plenty of reading material

    the reason for margin collapse is (my understanding anyway) ~ for example if you had 2 paragraphs with a top and bottom margin. or every P, the margin would effectively double, as the top and bottom will count for both - probably not what you would desire.

    it occurs whenever 2 margins directly "touch". if a border/padding/another element is inbetween 2 margins, margin collapse will not occur.

    further reading http://www.complexspiral.com/publica...psing-margins/
    http://www.andybudd.com/archives/200...gin_for_error/

  • Users who have thanked met for this post:

    logical_c (08-31-2010)

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    floating takes the element out of the flow of the document.
    I guess it's just my hard-wired brain association with words that gets in my way sometimes. To me "out of the flow" means...well...out of the flow (like an absolutely positioned element).

    Personally I'd describe floated elements as decidedly "in" the flow, but shifted. That's why we say stuff "flows" around a floated element, right?

    It doesn't make intuitive sense either (to me anyway) why all the other page content is "aware" of floated elements (because they flow around them, right?), but the container parent ignores it. Again, the CSS gods are way smarter than me and I'm sure there's a perfectly logical reason it's done that way.

    Using overflow: auto or hidden seems closer to a bug fix than an elegant solution. It works, but that doesn't seem to be why "overlook" is a property in the first place. Overflow's default value is visible, so if a div with otherwise zero height now contains something (even if it's floated), my logical assumption would be that the parent would keep on expanding and keep all content visible. Oh well...the fix works.

    I'm sure you're right about margin collapse. If it didn't behave that way, I'm sure my post would have been about how to keep paragraph margins from "doubling".

    Thanks again.

  • #8
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    http://css-tricks.com/all-about-floats/

    definitely worth a read

  • #9
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yep...that's one of the best explanations I found (I actually read it yesterday). Really well documented and illustrated. Thanks again!!!


  •  

    Posting Permissions

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