Grow your CSS skills. Land your dream job.

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:10 am

    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.

    # February 15, 2013 at 9:17 am

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

    # 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:

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

    # February 15, 2013 at 9:55 am

    This is going to be a tester.

    # February 15, 2013 at 10:10 am

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

    # February 15, 2013 at 10:18 am

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

    # 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 10:59 am

    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!

    # 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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".