Pixel Acres

Aligning an element to the bottom of its container

Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in table-based layouts.

Let’s say we want to display an image with a title aligned to its top right corner, and a caption aligned to its bottom right corner:

Bottom Aligned Element

Here is the CSS:

.portfolioImg {
    float:left;
    margin-right: 20px;
}
.imgDetails {
    position: relative;
    float:left;
    height: 280px;
    width: 150px;
    }
    .imgDetails p {
        position: absolute;
        bottom: 0;
        }

Here is the markup:

<img class="portfolioImg" src="monster.jpg" width="280" height="280" alt="Knitted monster" />
<div class="imgDetails">
    <h2>Image title</h2>
    <p>This is the image caption. It is aligned to the bottom of its containing element.</p>
</div>

The trick is to set the position of the container to relative, and the position the of the child element to absolute. Then set the child’s bottom property to 0.

Photo credit

The photo of the cute knitted critter in my example is by Tamie Snow. You can learn more about her wonderful knitted creations at Roxycraft.

Filed under: CSS

5 Responses to “Aligning an element to the bottom of its container”

  1. Anna-Serfaklar says:

    Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.

  2. Pigeon says:

    Cheers for this! Super simple!

  3. Jaitra says:

    An alternative if you were working with dynamically generated images with variable heights would be to use a wrapper div around both image and the caption, float the image left and absolutely position the caption to the bottom (as currently), but instead of specifying a height for caption or the wrapper div, define overflow: hidden on the wrapper, so it will automatically stretch to the height of the floated image and thereby align the caption correctly.

  4. Jonathan says:

    @Jaitra – A very good suggestion!

  5. Newbie says:

    @Jaitra could you please show a code example of your solution cause that’s the situation I’m in and I can’t solve the problem? Thank you.

Leave a Reply