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

HTML & CSS
1

[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?



#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;
}



<div id="relative_test2">

    <div id="test2">
    Hello
    </div>

    <div id="test3">
    Hello
    </div>

</div>
2

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.

3

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

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.