Question

I’m trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here’s the JSFiddle example: http://jsfiddle.net/3GGa7/

As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:

However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.

What’s the most elegant way to accomplish this?

Answer 1

Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;

.project-header {
    height: 100px;
    position:relative;;
}

.project-title {
    background: black;
    opacity: 0.75;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

Check it out http://jsfiddle.net/gXyEU/

This way, whether you use a bigger image, or change its position or margin, you’ll never have to worry about the title, it will always be positioned where it should be.