SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Understanding Document Flow

    I have this wrapping div that has a padding of 40px to push "space" off it's boundaries on it's nested elements.

    Immediately inside that element, I have 2 <divs>, the top to have its top "attached" to the top inside of the wrapping div, and the second to have its bottom "attached" to the bottom inside of the wrapping div.

    Since the wrapping element is positioned relative, I could position these child divs with 'absolute' and they'd attach just fine, but I'd have to manually define the width of the elements as well as manually re-push them off the wrapping div (since they won't see/respect the 40px padding).

    If I position them relative, the first <div> attaches to the top of the inside of the wrapping div just fine but that probably has more to do with document flow. At this point, I am unable to get the next child div to attach itself to the bottom of the wrapping div.

    <div id="wrapper">
    <div class="attach-me-to-top"><p>Top</p></div>
    <div class="attach-me-to-bottom"><p>Bottom</p></div>
    </div>

    Basically that's the structure. Is there a solution to this or will I need to absolutely position these elements and manually offset them from the parent?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Few thoughts here.

    1. Absolute is the only way to do exactly what you're wanting to do.
    2. It may be easier to just add a bottom margin to the first child div, or a top margin to the second.
    3. That being the case, you could probably scrap the wrapper div.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is an example of Ron Roe's suggestion. Padding is used horizontally and margins vertically. Overflow:hidden gives the top and bottom-most margins solid boundaries to push against. Interestingly, you do not have to delete the inner <div> and it's contents to lose the height... just deleting the contents will do the trick. Try it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?976709-Understanding-Document-Flow
    Thread: Understanding Document Flow
    2013.02.16 12:19
    aaron.martone
    -->
    <head>
        <title>collapsing margins</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {
        background-color:#876;
        padding:0;
        margin:40px 0 0;
    }
    .outer {
        background-color:#cde;
        width:900px;
        overflow:hidden;
        padding:0 40px;       /* horizontal padding */
        margin:0 auto;
    }
    .outer div {
        background-color:#ded;
        margin-top:40px;      /* vertical margins */
        margin-bottom:40px;
    }
    p {margin:0;}
    
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
        <div>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
        <div>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
    </div>
    
    </body>
    </html>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    @aaron.martone I must be missing something, as they HTML posted will do what you want by default. Is it that you want space between the top and bottom inner divs? You could give the lower one a top margin if so.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Yeah. Am ahving trouble visualizing what you were describing as other than could simply be coded this way:

    Code:
    <style>
    #wrapper {  padding:0 40px}
    #wrapper p {margin:0; padding:1em 0}
    #wrapper>div, #wrapper { border:1px solid pink;}
    #wrapper>div+div {margin-top:41px; margin-bottom:-1px}
    #wrapper>div {margin-top:-1px}
    </style>
    
    
    <div id="wrapper">
    <div><p>Top</p></div>
    <div><p>middle</p></div>
    <div><p>middle</p></div>
    <div><p>Bottom</p></div>
    </div>
    BTW , if you dont want the side space...
    then delete the #wrapper rule and change:
    Code:
     #wrapper>div {margin:-1px -1px auto -1px}
    very simple css and no classes required even! But maybe I am off about what your desired layout was.


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
  •