CSS absolute height position

Question

I have two divs inside the parent div. I want to position the divs so that the position of div 1 is absolute at the bottom:0 parent div, and div 2 is always at the top of div 1.

I use the absolute position to place the div. However, the problem is that div 1 has a variable height. How can I place div 2 at the top of div 1 in this case? See Attached Image:

I am trying to do this, but this does not work:

HTML:

 <div class="box"> <div class="wrap"> <div class="box2">box 2</div> <div class="box1">box1</div> </div> </div> 

CSS

 .box{ width: 200px; height: 200px; background: green; position: relative; } .wrap{ position: absolute; bottom: 0; border: 1px solid blue; } .box1{ background: yellow; height: 50px; position: relative; } .box2{ background: red; position: absolute; top: 0; } 

Demo: http://jsfiddle.net/P46ht/

Answer 1

You are almost there.

Try this - basically removing the positions from the fields and setting the width to .wrap :

 .wrap{ position: absolute; bottom: 0; left:0;right:0; border: 1px solid blue; } .box1{ background: yellow; } .box2{ background: red; } 

Example: http://jsfiddle.net/P46ht/1/

Answer 2

Try this ( DEMO ):

 .wrap{ position: absolute; bottom: 0; width: 100%; border: 1px solid blue; box-sizing: border-box; } .box1{ background: yellow; } .box2{ background: red; height: 50px; }