title: How to place a relative element after an absolute element and cause parent div to expand to fit children?
body: <p>I'm trying to understand css, so I tried my best to make my experimental code below as generic as possible. </p>
  
  <p>I have a simple page, with two boxes, I wanted one of the boxes to be positioned a certain way which according to <a href="https://stackoverflow.com/questions/10082567/why-does-setting-the-right-css-attribute-push-an-element-to-the-left">Why does setting the `right` CSS attribute push an element to the left?</a> requires me to set its position like so <code>position:absolute</code> However, I now want to add some divs which fall below my absolute div, furthermore I would like the parent div to expand to fit the size of the child divs.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              #outer {
                  position : relative;
                  background-color : green;
                  width : 500px;
                  height : 500px;
  /*                 overflow : hidden; */
  /* I know from working with floating elements inside divs that this works
   *   to cause parent divs to exand out around floating children, but this
   *   does not do the same thing here, it lops off the bottom of the child divs
   *   if I un-comment the preceding line!
   */
              }
  
              #inner {
                  position : absolute;
                  background-color : blue;
                  height : 400px;
                  width : 400px;
                  top : 10px;
                  right : 20px;
              }
  
  
              #top_object {
                  position : absolute;
                  top : 450px;
              }
  
               .object {
                  position : relative;
                  width : 450px;
                  height : 200px;
                  background-color : yellow;
                  margin-bottom : 25px;
              }
  /*   The followsing was suggested by: 
          https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content 
          But has no effect!
  */
             .clear {
                  clear : both;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="outer"&gt;
              &lt;div id="inner"&gt;
  
  
              &lt;/div&gt;
              &lt;div id="top_object" class="object"&gt;
                  Top Object
              &lt;/div&gt;
              &lt;div class="object"&gt;
                  Second Object
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to have my first div with class object and id top_object positioned at an absolute distance from the top like it appears. However, I would then like further object divs to flow below top object. In other words I want to use top_object to define an absolute position for the first instance of div with class object and then have the following divs with class object naturally flow down the page, with a 25px margin as set in <code>margin:25px;</code> of <code>.object</code>, following top_object without the need to set each object's <code>top:XXXpx;</code> attribute separately. </p>
  
  <p>My first question is why does my second object appear above my first object, and how can I cause <code>relative</code> positioned objects to flow below an <code>absolute</code> positioned object?</p>
  
  <p>Second how do I get background div to expand and around the children divs when floating divs are not used?</p>
  
  <p>Furthermore, I am working to understand what is happening, although a direct answer to my question would be appreciated I would like to hear an explanation as to why what I am doing is wrong, and why any solution would fix it. I want to understand the logic behind css, not so much to see a specific code snippet which fixes the issue, although that would be nice too!</p>