Bottom to top element arrangement

Question

I\'m trying to find out how I can force elements to start from the bottom going to the top.

I have searched through stackoverflow and I can\'t seem to get the answer th

Answer 1

For Older Browsers (IE7+)

It can still be done, assuming a limited set of objects as the css will get more complex for more rows (though not impossible). For the original six objects in the problem, see this fiddle. For 12 objects in 3 rows see another.

Note: I realize some version of an :nth-child() selector could be used rather than the cumbersome code below, but then it would again not be supported by older browsers (which was my point in adding my answer to this post).

HTML

    
a
    
b
    
c
    
d
    
e
    
f

CSS

ul {
    width: 210px;
}

li {
    display: block;
    float: left;
    width: 48px;
    height: 48px;
    margin: 0;
    text-align: center;
    border: 1px solid blue;
}

li:first-child,
li:first-child + li,
li:first-child + li + li,
li:first-child + li + li + li {
    margin: 51px 0 -99px 0;
}