Question

I have a new problem. I need do a vertical align in a HTML element to bottom of another, but I can use absolute value, one time that the second element can have different height.

Take a look on this jsFiddle please.

The <a> need stay on bottom of <h1> like here – workarrounded.

I tried vertical-align but it don’t works.

How I can do it? If need, I can change HTML structure without problem.

Edit: sorry, but I do not think I left something clear: I can’t use margin-top or similar, because the font-size of H1 is variable.

Bye.

Answer 1

You can do it without having to specify an exact px offset like this: http://jsfiddle.net/Tu7bA/14/

Relevant new CSS:

.header-container {
    overflow: hidden;
    position: relative
}
.header-container > ul {
    position: absolute;
    bottom: 0; right: 0
}
.header-container ul > li {
    float: right;
    text-decoration: none;
    color: #0A27D5;
    font-size: 8pt;
    margin-left: 16px;
}
.header-container > h1.first {
    float: left;
    font-size: 26pt;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

HTML:

<div class="content-block">
    <div class="header-container">
        <h1 class="first">Lorem Ipsum</h1>
        <ul>
            <li><a href="./Edit">editar</a></li>
            <li><a href="./Attach">anexar</a></li>
        </ul>
    </div>
    <p>
        Lorem ipsum dolor sit amet..
    </p>
</div>