Wrap HTML elements bottom to top

Question

Is it possible by HTML / CSS to display a row of elements at the bottom of a container, that wrap upwards if the container gets to small? Like if we would start writing at the bottom of a page and continue above the already written lines.

The elements do not need to be the words of an inline text, a collection of elements like SPAN or DIV placed text-like via float:left; for example would do either.

Answer 1

Maybe using min-height so the box will expand upwards:

#container{
     position:relative;
     width: 300px;
     height: 200px;
     background: #f90;  
}      
#text-container{
    position: absolute;
    bottom: 0;
    width: 300px;
    min-height: 10%;
    background: #f00;        
}

http://jsfiddle.net/grainne/DD7dG/32/

Answer 2

I don't think so. In fact, just having something "bottom-align" is already pretty involved. There are a few "close enough" workarounds, but nothing that's a true "vertical-align: bottom". Examples on websites with such elements have always turned out to be a bunch of JavaScript.

Basically, many others have tried to deal with this issue before.