floating divs upwards
# February 15, 2013 at 9:03 am
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# February 15, 2013 at 9:45 am
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:# February 15, 2013 at 10:41 am
>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).# February 15, 2013 at 11:41 am
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.# February 15, 2013 at 12:36 pm
Another version, more complicated but probably worth sharing: http://codepen.io/HugoGiraudel/pen/cbaae4a31389cce1d1084e88d8e08f9a.
Not very maintainable though.
You must be logged in to reply to this topic.