Question

I’m having CSS question on aligning an element vertically.

Please take a look at this URL:
http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]

If you look at the sidebar to the right, at the bottom there’s a block with an image saying ‘Grave Digger’. I want this block to be aligned at the bottom of the sidebar.

I’ve tried wrapping it in a div and applying vertical-align: bottom to the grave-digger element, but that doesn’t offer the desired results.
What is the correct way of doing this?

Answer 1

Well, beginning with, sidebar_gravedigger is at the bottom of the side_bar, so, the first problem is that the sidebar is that long. If you want that element positioned at the bottom of the container (the parent container of the side_bar), I recommend this:

.sidebar_gravedigger {
    position: absolute;
    bottom: 20px; /*container padding*/
}

#sidebar {
    padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}

.container{
    position: relative;
}