Blending images from bottom to top in a div

Question

Say I have a div container with a fixed width and height. Now I want to add images to the container, while the images overlap each other.

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

thanks

Answer 1

To make it work in modern browsers, you can 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> 

Jsfiddle example.

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