Contain absolute positioned items

HTML & CSS
1

Hey there,

My CSS skills are growing at the moment and I am getting better all the time but I noticed today that there is something missing from my skillset.

I cannot contain absolutely positioned divs.

I understand that by placing them inside a parent div the top and left positions become the top and left of that div instead of the page body.

This also enables me to place a number of absolutely positioned divs inside this parent container which holds them so that they do not wrap when the window is resized.

This is all great except that due to their absolute positioning, these child divs cannot force the parent container to grow in height as they expand. They just spill out of the parent.

How do I prevent them from spilling out whilst retaining the ability to place them anywhere? Is relative positioning the answer? It may be a silly question but I need to know that my understanding is correct.
thanks

2

I’m not sure, but I think what you are really asking is how to get the parent div to grow with the child divs.

If so, then assign the style

overflow: hidden

to the parent div and this will force it to “grow” with the child divs.

3

This is all great except that due to their absolute positioning, these child divs cannot force the parent container to grow in height as they expand. They just spill out of the parent.

How do I prevent them from spilling out whilst retaining the ability to place them anywhere? Is relative positioning the answer? It may be a silly question but I need to know that my understanding is correct.
Hi,
AP elements are completely removed from the normal page flow and the parent cannot enclose them on it’s own. The only time that AP elements are really useful is for small portions of a page that needs to be intentionally removed from the page flow. And even then you must protect them from other elements in the page flow by setting margins or paddings on those other elements.

A lot of times AP is used on sandbag spans for image replacement techniques. You will also find AP used on a dropdown UL, that is done so it does not push other elements around when the dropdown comes into view. The reason they are used is because they are removed from the flow and for layering effects.

Your not going to be able to prevent them from spilling out of the parent if their content is greater than another elements content. I think Kalon was thinking of floats when he suggested overflow:hidden on the parent. That brings up another matter too, floats are also removed from the normal flow of the page but we are able to regain the flow by using the clear property. Text in another element will also wrap around a float that is in it’s path while the container itself will naturally slide under the float. But don’t confuse float behavior with AP, even though they are both removed from the flow they behave completely different.

Here is a little test case I put together with a float and some AP divs. You will see that the parent only expands to accommodate the float, and only after I used a psedo :after clearing block. I used that instead of overflow:hidden so the AP divs did not get clipped off.

Hope that helps! :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body, p {
    margin:0;
    padding:0;
    font:bold 100%/1.3 arial;
}
#wrap {
    width:900px;
    margin:0 auto;
    padding:10px;
    background:#CCC;
    position:relative;
}
#wrap:after {
    clear:both;
    display:block;
    content:"pseudo clearing block";
    text-align:right;
    background:red;
}
#head {
    width:100%;
    height:100px;
    background:#CDF;
}
#float {
    float:right;
    width:250px;
    min-height:100px;
    margin-bottom:50px;
    background:cyan;
}
#ap-1, #ap-2 {
    position:absolute;
    top:110px;
    left:10px;
    width:200px;
    height:300px;
    background:lime;
}
#ap-2 {
    left:220px;
    background:orange;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="head">
        <p>Header Div</p>
    </div>
    <div id="float">
        <p>Float right div <br> with 50px bottom margin</p>
    </div>       
    <div id="ap-1">
        <p>AP box one</p>
    </div>
    <div id="ap-2">
        <p>AP box two</p>
    </div>
</div>

</body>
</html>
4

yep, sorry :badpc: :headbang: