one block at the bottom, another at the top

Question

There are 2 divs inside of another div. The first div must be at the top, the second one should be at the bottom. The height of the parent div may change, and the height of the top div may change, too. Knowing this, how can I position the second block at the bottom? So I have something like this:

<div id="parentdiv">
<div id="div1" style="width:100px;height:100px;">top div</div>
<div id="div2" style="width:100px;height:100px;">bottom div</div>
</div>

But the height of the parentdiv may change, and div2 must stay at the bottom.

Answer 1

Live Demo

• This works well if you know the height of the parent will always be at least the height of the two child elements combined. Otherwise, this happens .
• Read this to understand how it works.

CSS:

#parentdiv {
    position: relative;
    height: 300px;
    background: #ccc
}
#div1, #div2 {
    position: absolute;
    left: 0;
    outline: 1px solid red
}
#div1 {
    top: 0
}
#div2 {
    bottom: 0
}