Stack Up Buttons

Question

I have never seen this before, or if I had not noticed how it was done.

I was wondering if there is a way with HTML and CSS to stack elements up and not down, like displaying: inline. Basically, I want to go against gravity when stacked items fall at the end of the line.

Ideally, I want to just use CSS and HTML. Javascript, if necessary, I think it could be.

- up and more →

Answer 1

If you flip the container and the children, it will look as if the children are going in the opposite gravity.

Here is an example:

http://jsfiddle.net/WSBLv/

I put a big box and a lot of small box. They all use float: left to move elements from left to right, from top to bottom.

Then you flip the big block and all the small blocks with 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 can use the jQuery insertBefore () function to add items "on top" of others.

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

Answer 3

Not a very elegant solution, but you can use a spacer <div> or an image to fill this initial space and push everything to the right. when you add or remove elements, you must expand or shrink the div to align it.