CSS absolute position over variable height

Question

I have two div's inside a parent div. I want to place the divs so that the div 1 position is absolute at `bottom:0` of parent div, and the div 2 is always on the top of the div 1. I am using absolute position to place the divs. However the problem is that the div 1 has variable height. How can I place the div 2 on the top of the div 1 in that case? Please see the attached image: I am trying this, but it does not work: HTML: ```

box 2

box1

``` 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/

Accepted Answer

You're almost there.

Try this - basically removing the positions from the boxes, and setting the width on `.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/

CSS absolute position over variable height

Solution

Problem