How to place a relative element after an absolute element and cause parent div to expand to fit children?
css, html, positioning
Solution
`position: absolute;` takes that object completely out of the document flow. So it's going to appear exactly where you tell it to be with your `top: 450px` and `right` or `left` selectors. That positioning won't effect any other element of your page (unless you cover up another object which will definitely happen without `z-index`) If you want everything to be placed below `#top_object` then you need to give it `display: block;` and whatever margin you need.
Also, `overflow: hidden` will cut off anything that is outside the defined width or height so you need to define min-width and min-height and then use overflow: auto instead of hidden.
Problem
I'm trying to understand css, so I tried my best to make my experimental code below as generic as possible. I have a simple page, with two boxes, I wanted one of the boxes to be positioned a certain way which according to Why does setting the `right` CSS attribute push an element to the left? requires me to set its position like so `position:absolute` 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. ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #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; } </style> </head> <body> <div id="outer"> <div id="inner"> </div> <div id="top_object" class="object"> Top Object </div> <div class="object"> Second Object </div> <div class="clear"></div> </div> </body> </html> ``` 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 `margin:25px;` of `.object`, following top_object without the need to set each object's `top:XXXpx;` attribute separately. My first question is why does my second object appear above my first object, and how can I cause `relative` positioned objects to flow below an `absolute` positioned object? Second how do I get background div to expand and around the children divs when floating divs are not used? 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!