floating divs upwards

[ravr]

Hello, i need a bit of assistance with this problem.

I’m creating a jquery module which stacks divs on top of eachother.
I’m appending divs with a dynamic height and width.

They get a float:left which makes them appear next to eachother untill the max-width is reached and it continues on the next line below.
Is it in anyway possible to “reverse” the process of the floats entering a line below the original line, and make a new line above the original instead of below?

In short the question is: is it possible to make divs (or other block elements) float “upwards” instead of the standard browser order?

As shown in the codepen below, the .box is continued on the line below, what i want is to float it to top.
http://cdpn.io/cdHFA

[Paulie_D]

I can’t think of a solution using all floats but something with inline-block and a single float is rattling in my brain.

I’m on my phone now but I will think on it.

[Senff]

Not entirely sure what you mean, but it might be something like this….? http://hugogiraudel.com/blog/float-down

[ravr]

Cheers for the quick answers!
its in the right direction. I want to achieve something similiar.
Made a quick mock-up what i want to achieve:

http://imageshack.us/photo/my-images/401/floatup.png/

[Paulie_D]

This is going to be a tester.

[Paulie_D]

I’m not quite there…but I’m closing in on it.: http://codepen.io/Paulie-D/pen/jLxBF

[ravr]

wow, that looks great!
Adding a float:right to the .left instead of a float:none makes it work!

[Paulie_D]

>Adding a float:right to the .left instead of a float:none makes it work!

Not quite. Your ideal answer is to have blocks 1 – 5 all on the bottom (reading ltr) with blocks 6 – 9 on top (also ltr) with a ‘blank’ space for block 10 to fit in.

At the moment, that’s not happening. Blocks 6 – 9 are reading rtl. Maybe you could re-order these with jQuery but frankly, I very much doubt if this is been possible in a practical way.

Certainly, the height of each div would have to be fixed although the width could be variable (subject to jQuery).

[ravr]

Hmm, you’re right. It doesn’t really affect my case because i’m using a static amount of divs.
I will follow your advice and I’m currently using some jQuery anyway, so I’m going to take a swing at that.

Thanks for the helpfull insights!

[Kitty Giraudel]

The problem I see with @Paulie_D’s solution is it doesn’t suit DOM’s order. I guess you want items from 1 to 10 in the DOM, but with your desired layout thanks to CSS.

As @senff said, I wrote something about a pretty similar demand a few weeks ago. I’ll have a look at your problem, I am pretty sure there is a “easy” solution.

Edit @ravr: this works http://codepen.io/HugoGiraudel/pen/35583b6237019a3a3a73fa8c484f465f.

Edit: I think I already figured out the Sass mixin to handle this for any number of rows. If you want, I could write it down.

[Kitty Giraudel]

Another version, more complicated but probably worth sharing: http://codepen.io/HugoGiraudel/pen/cbaae4a31389cce1d1084e88d8e08f9a.

Not very maintainable though.

[Author]

Posts