Search code examples
javascripthtmlcsscreation

Stacking buttons upwards

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.

enter image description here -- up up and more --> enter image description here

Solution

  • 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/