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.

[ryugen]

Vamos por parte, si tu idea es ponerle un caption al "figure" semanticamente seria correcto utililzar la etiqueta figcaption.

Por otra parte seria mas facil solucionar tu problema viendo un ejemplo en vivo pero mis consejos son los siguientes:

"header" deberia ser un hijo de "figure"

Código HTML:

<figure class="aligncenter">
            <img scr="ruta/a/la/imagen.jpg" />
             <header>
            <h2 class="entry-title"><a href="#">Lorem ipsum dolor...</a></h2>
        </header>
        </figure>
 

Luego, aplicaría posicion relativa al figure

Código CSS:

#featured article{ position:relative;}
 

y finalmente le daria posicionamiento absoluto al "header"

Código CSS:

#featured article{ 
          position:absolute;
          bottom:0;
          width:100%;
}
 

Saludos y espero que te sirva, cualquier cosa no dudes en preguntar

[rogertm]

Si, me sirve, pero en lugar de header usaré figcaption dentro de figure, así no rompo algunas reglas

[ryugen]

Iniciado por rogertm

Si, me sirve, pero en lugar de header usaré figcaption dentro de figure, así no rompo algunas reglas

No es romper reglas, porque sintaticamente es correcto alojar un "header" que es un "flow content" denttro de un "figure".

Tanto "header" como "figcaption" funcionarán en tu caso, sin embargo creo que "figcaption" seria mas semanticamente correcto.

Saludos