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

Can you change $query to the following. That would be the easiest way to do it.

$query  = "SELECT e.*, CONCAT(s.lname,', ', s.fname) name     FROM enrollment e, student s
WHERE e.studentID = s.studentID AND e.csID = '". $classID ."' ORDER BY sort DESC;";

Answer 2

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

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>

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;
}

Answer 3

A css solution fiddle

ul, ul li {
-webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
        transform: scaleY(-1);

}
ul {
    width: 350px;
}
 li {
    display: inline-block;
    width: 70px;
    zoom: 1;         
    *display: inline;
}

This works by flipping the entire UL and then each LI on it's Y axis.