Question

Given this little piece.

http://jsfiddle.net/4gb6K/7/

I am attempting to align the “bot” element at the bottom while keeping the “top” at top. I choose to draw up this little example with div’s to try a few things my self, so ill use that instead of the actual one, same concept though.

Actual html looks more like:

    <a class="box" href="single.html" title="Link to Single Page">
        <h4>Cras vestibulum</h4>
        <p>Cras vestibulum lorem et dui mollis sed posuere leo semper.</p>
        <img alt="" src="images/box_ph.png">
    </a>

A is the container, H4 and P needs to v-align at top. where I would like to v-align image at bottom.

Any ideas? As vertical-align: bottom; doesn’t do the trick, not sure if that is because it is in the same container as a top aligned element? But I don’t have many ideas other than wrapping it all in huge amounts of HTML/CSS or going with fixed heights (currently it is actually “min-height” instead of “height” and absolute placements.

Answer 1

Like this: jsFiddle example.

Use positioning on all three elements. Relative on the container, and absolute on the inner divs.

CSS:

.outer {
    height: 600px;
    border: 1px solid black;
    position: relative;
}
.top{
    position: absolute;
    border: 1px solid black;
    top: 0;
}
.bot{
    border: 1px solid black;
    position:absolute;
    bottom:0;
}

Update: Here’s a jsFiddle example using your other code example with the appropriate CSS.