Stacking buttons upwards

Question

I've never seen this before, or if I have I haven't noticed how it was done.

I was wondering if there was a way with HTML and CSS to stack elements up, rather then down as display:inline would do. Pretty much, I want to go against gravity when the stacked elements get to the end of the line.

Ideally, I want to just use CSS and HTML. Javascript, if needed which I think it might be.

-- up up and more -->

Answer 1

If you flip the container and the children, it will appear like the children is going the opposite gravity.

Here is a sample:

http://jsfiddle.net/WSBLv/

I put a big box and a lot of small box in there. They are all using float: left to make the elements go from left to right, top to bottom.

Then you flip both the big box and all the small blocks by using CSS transforms:

-moz-transform: scale(-1);
-webkit-transform: scale(-1);
-o-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);

For Internet Explorer, you can use filters!

filter: FlipH FlipV;

Then it looks like this:

http://jsfiddle.net/NFSMm/

Answer 2

You could use the jQuery insertBefore() function to add elements "on top" of others.

http://api.jquery.com/insertBefore/