4

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!

Community
  • 1
  • 1
john-charles
  • 1,417
  • 4
  • 17
  • 30
  • Since this is not a programming question, it is probably better asked over at [http://webmasters.stackexchange.com/](http://webmasters.stackexchange.com/) – Peter Rowell Apr 10 '12 at 16:45
  • I would challenge you to rethink your approach. Absolute positioning is not necessary nearly as often as you might think. For example, with `#top_object`, why don't you make it relative, with a margin-top of 450px? And why do you need to make inner positioned absolutely? Why can't it be, for example, `float: right;`, but positioned relatively? – random_user_name Apr 10 '12 at 16:47
  • ok, i tried that but it moves everything down by 450px. and using float : right with relative positioning but pushes everything down by 450px. – john-charles Apr 10 '12 at 16:59

1 Answers1

5

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.

CaldwellYSR
  • 3,056
  • 5
  • 33
  • 50