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.

Possible duplicate of https://stackoverflow.com/questions/20644178/how-to-make-elements-flow-from-bottom-to-top — Mark Buikema, Dec 12 '17 at 11:00

score 3 · Answer 1 · answered Oct 29 '12 at 09:59

3

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/

answered Oct 29 '12 at 09:59

questioner

1,144
4
14
22

That grows the whole block upwards from a given location, but doesn't wrap it's content bottom-up. The idea was that any additional line of text appends to the top rather to the bottom. – dronus Oct 29 '12 at 10:57
@dronus - you would need to use javascript to get this effect. – questioner Oct 29 '12 at 12:11

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

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.

edited May 23 '17 at 12:15

Community

1
1

answered Oct 29 '12 at 09:33

Kache

15,647
12
51
79

Wrap HTML elements bottom to top

2 Answers2