How to align an absolute DIV of unknown height outside a "relative" parent by CSS?

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

Answer 2

Check this..

HTML:
-------

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

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

(Example)

Answer 3

you can use negative value for bottom, eg. bottom: -100px

EDIT: here is better solution: http://jsfiddle.net/mqy4z/3/ - set child's position to top:100%