html - How do bottom align an element so it can expand unrestricted vertically? -

on 1 of pages have following structure attempting use sort of tooltip style behavior. "child" element hidden until "container" element clicked. trying align child above actual container issue child can have variable height don't know how align correctly.

here concept code:

<div id="container">     <p>some text</p>     <div id="child">         <p>dynamic text so</p>         <p>i never know the</p>         <p>expected height</p>     </div> </div>   #container {     width: 200px;     height: 40px;     border: 1px solid blue; }  #child {     position: absolute;     bottom: 40px;     border: 1px solid #red; } 

essentially want align bottom of #child top of #container container can expand upward unrestructed depending on value of content. isn't quite producing expected result though can see here:

http://jsfiddle.net/ta9wr/

it works because have set #child bottom value 130px. if content inside #child changes in height @ no longer work. here quick ms paint version of want happen #child's hight varies:

http://i.imgur.com/wxowrpp.png

any ideas how can accomplish want?

you need position div absolutely (relative parent) , set bottom property 100% (which means full height of parent) place @ top of container:

#container {     margin-top: 100px;     margin-left: 100px;     width: 200px;     height: 40px;     background: blue;     position: relative; /*set container relative */ }  #child {     width: 300px;     background: red;     position: absolute; /* position relative container*/     bottom: 100%; /*place bottom @ top of container*/ } 

this make #child expand upwards

demo fiddle