SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I contain these children.. absolute and relative positioning

    [ATTACH][/ATTACH]

    Look at my attachment. I'm trying to get #relative_test2 to contain it's children #test2 and #test3. Overflow:hidden didn't work, evidently that is just for floats. Is it possible to contain these guys?


    Code CSS:
     
    #relative_test2 {
        position:relative;
        top:100px;
        border: 1px solid #ccc;
    }
     
     
    #test2 {
        position:absolute;
        top:0;
        right:0;
        background:#ff0000;
    }
     
    #test3 {
        position:absolute;
        bottom:0;
        left:0;
        background:#ff0000;
    }


    Code HTML4Strict:
    <div id="relative_test2">
     
        <div id="test2">
        Hello
        </div>
     
        <div id="test3">
        Hello
        </div>
     
    </div>
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Absolute elements are removed for the flow.

    Although they may be contained by a parent div (one that is positioned) they are removed from the flow at that point and the parent will ignore that absolute element when calculating its height.

    Essentially once you absolutely position an element then all elements on the page will think that it doesn't really exist. Although that's not quite true as the positioned parent will create the stacking context for that absolute child but it will not look after that child (i.e. I've got a child but I don't know where he is) .

    If you want elements to react with each other then you must keep them in the flow. Floats are removed from the flow but you can use the clear property to regain control of the flow after the float and get things back on track. There is no such mechanism for absolute elements (unfortunately).

    If you want horizontal alignment then you should use floats and a clearing mechanism.

    Also be careful with relative positioning as relatively placed elements are in fact not moved at all physically. They are only moved visually and the space that they previously occupied is always preserved. That is to say that their movement doesn't interrupt the flow of the document at all and if you move an element with relative positioning everything else on the page will think that it hasn't moved although in its new position it may overlap other elements and leave a gap where it once was.

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what Paul O'B is saying, the box model height dimension for the relative_test2 div is computing as a zero value in your case. why? by using absolute positioning the elements are taken out of the normal flow. the normal flow being: boxes in boxes in boxes, like matroska dolls. normally, in html, putting boxes in a box (two divs in a div) makes the containing box to expand to contain the other boxes.

    putting float or absolute on a child element, makes the parent disregard the box model of it when computing its own.

    the clearing mechanism makes the box model for the parent acknowledge the height dimension in the box model for the floating children and adjust.

    for the absolute positioned elements there is no css mechanism like for the floating elements inside a parent. hence, zero height for your parent box model. the obvious solution: compute the height for the parent some other way: on server side, with javascript or simply hard coded css height declaration in the style.

    on the side note, your layout will probably be possible replacing absolute positioning with floating and some additional tinkering.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks for the feedback guys. SitePoint forums never fail me when I get stumped. You both got into the nuts bolts of the question. I needed that.


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
  •