How can i send inner div to bottom of parent div?

Question

The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

Answer 1

Make the outer div position="relative" and the inner div position="absolute" and set it's bottom="0".

Answer 2

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>

Answer 3

This is one way

<div style="position: relative; width: 200px; height: 150px; border: 1px solid black;">
    <div style="position: absolute; bottom: 0; width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).

If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".