Question

Say I have a div container with a fixed width and height. Now, I want to add images to the container, with images piling on top of each other.

If I just fix the width of the container, and add images inside it, they will pile up from top to bottom. How can I make them pile up from bottom to top?

Thanks

Answer 1

To make it work in modern browsers, you could use display: table-cell:

css

.container {
    display: table-cell;
    vertical-align: bottom;
}
.child {
    display: inline-block;    /* act like image */
}

html

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

An example on jsfiddle.

By the way, that only aligns them to the bottom, it still shows the first block on top…