Question

Consider a simple example with html

<div class="parent">
    <div class="child">
    </div>
</div> 

and CSS

.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:40px;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}

to place a DIV with absolute position just beneath its parent (with relative position).

In this example, I equaled the absolute’s top to the parent relative’s height.

How to align the absolute DIV just under the parent when the height is unknown (both parent and child)?

Answer 1

Didn’t think this would work myself, but it seems to:

html, body {
    height: 100%;
}
.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:100%;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}