Understanding Document Flow

HTML & CSS
1

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

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

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.


<!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

@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.

5

Yeah. Am ahving trouble visualizing what you were describing as other than could simply be coded this way:


<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:

 #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.

6