CODEWITHSUNDEEP
javascripthtmlcsscreation
jbcurtin
jbcurtin

Reputation: 1803

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

Upvotes: 6

Views: 200

Answers (3)

Thai
Thai

Reputation: 11354

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/

Upvotes: 5

Yisroel
Yisroel

Reputation: 8174

Not a very elegant solution, but you could use a spacer <div> or image fill that initial space, and push everything to the right. as you add or remove elements, you would expand or contract the div to keep it aligned.

Upvotes: 0

Steve Claridge
Steve Claridge

Reputation: 11080

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

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

Upvotes: 1

Related Questions