6

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

jbcurtin
  • 1,642
  • 1
  • 14
  • 22
  • 1
    Could you provide an ascii-art demo, or an image, of what you want? I'm having trouble understanding what you're asking...sorry :( – David says reinstate Monica Mar 08 '11 at 14:14
  • 2
    So are we talking about having elements pile up from the bottom of a `
    ` like Tetris blocks?
     – Pointy Mar 08 '11 at 14:15
  • Hum, alright let me throw something together in gimp. – jbcurtin Mar 08 '11 at 14:15
  • what about inverting your collection and using `float:right` on every element that your write to html? They would end up with the first item of the collection as the bottom right element, then go to the left on the same line and continue above this line. Is this what you are after? – Bazzz Mar 08 '11 at 14:20
  • Hmm well the only thing that comes to mind would be some of the text direction stuff, but I don't know much about it. The CSS3 style things are (I think) "writing-mode", "direction", and "block-progression". – Pointy Mar 08 '11 at 14:23
  • @Bazzz - `float: right` won't do the trick. It doesn't invert the vertical direction, see here: http://jsfiddle.net/MWGjX/ – wsanville Mar 08 '11 at 14:29
  • @Pointy, looks like block progression would work. However I'm looking for a more standardized fix. If you write up an answer, I'll give an upvote but I can't give the check. ..unless, *testing now*, it works on all my browsers. – jbcurtin Mar 08 '11 at 14:37
  • Is this supposed to be CSS-based, with JavaScript if required? Or should it be more like "press a button to add another block using JavaScript"? – thirtydot Mar 08 '11 at 14:53
  • Ideally html/css, but JS will work to as long as it doesn't conflict and all you're using is the jQuery.position()/size() to obtain the dimensions data. – jbcurtin Mar 08 '11 at 14:57

3 Answers3

5

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/

Thai
  • 9,372
  • 1
  • 35
  • 47
  • 1
    +1 nice solution, I didn't think of this at the time. You're missing some easy vendor prefixed versions to make it work in more browsers, see: http://css3please.com/#box_rotate – thirtydot Mar 09 '11 at 10:07
  • Thanks. I added the `-o` and `-ms` vendor prefixes. – Thai Mar 09 '11 at 12:39
1

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

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

Steve Claridge
  • 9,202
  • 8
  • 30
  • 33
0

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.

Yisroel
  • 8,144
  • 4
  • 24
  • 26