Duda con posiciones absolutas y relativas

[rogertm]

Hola por acá, tengo una duda a ver si me ayudan a solucionarla. El caso es que tengo un elemento <header> ...</header> que quiero montar encima de una imagen <figure> ...</figure>. Todo está OK, hasta el momento en que lo de adentro de header, osea, el título del artículo ocupa más de dos lineas.

Lo ideal para mi es que se muestre de abajo para arriba, osea, que en lugar de ocupar espacio para abajo, sea para arriba, que l borde inferior del elemento se mantenga siempre a la misma altura.

Aquí una imagen que explica lo que pasa


El código que tengo es este:

Código HTML:

<section id="featured">
    <article id="post-105" class="clases">
        <figure class="aligncenter">
            <img scr="ruta/a/la/imagen.jpg" />
        </figure>
        <header>
            <h2 class="entry-title"><a href="#">Lorem ipsum dolor...</a></h2>
        </header>
        <p class="entry-meta">
            Posted on December 12, 2011 by rogertm
        </p><!-- .entry-meta -->
        <div class="entry-content">
            Fusce pulvinar, risus non euismod varius, ante tortor facilisis lorem, non condimentum diam nisl vel lectus
        </div><!-- .entry-content -->
    </article><!-- #post-## -->
</section>
 

Código CSS:

#featured{
    overflow: hidden;
    width: 100%;
}
#featured article{
    float: left;
    margin: 0 20px -70px 0;
    width: 320px;
}
#featured header{
    background: #000;
    position: relative;
    bottom: 100px;
    opacity: 0.7;
}
#featured .entry-title{
    min-height: 50px;
    opacity: 1 !important;
}
#featured .entry-meta{
    position: relative;
    top: -65px;
}
#featured .entry-content{
    position: relative;
    top: -85px;
}
 

Supongo que lo que estoy haciendo mal es referente a las posiciones, por eso tuve que resolver dándole una altura mínima a los títulos, pero cuando se pasa de ahí, baja todo el contenido siguiente...

Gracias de antemano por la ayuda que me puedan brindar.

Saludos.