How to position text at the bottom of block or inline-block element?

I've got an element with fixed height and width, and want to add text to it that is positioned at the bottom. It could span several lines (but less than element height), which makes this difficult.

It only needs to work in somewhat modern browsers开发者_如何学编程, such as >= IE8, >= FF3 and WebKit.

<div style="height:100px;border:1px solid #000;position:relative;">
    <p style="position:absolute;bottom:0;border:1px solid #f00;">
        This text is positioned at the bottom of the containing DIV.
    </p>
</div>

Should work :-)