Grow your CSS skills. Land your dream job.

Float items

  • # September 19, 2012 at 7:12 am

    Hi guys, having a little issue, I have a list of links which I’m floating left, which produces the results within image A, however what I’m trying to achieve is image B.

    My issue is, I’m pulling in a list of items within anchor tags but I can’t edit the actual loop code, simply the CSS file, usually I’d simply wrap items in a table to work around this issue but I was wondering if there’s a simple workaround to float items top left, bottom left then repeat rather than item all on one row and then the next.

    Image A – http://imageshack.us/photo/my-images/401/98791854.jpg
    Image B – http://imageshack.us/photo/my-images/88/51843399.jpg
    Any pointers / tips much appreciated, cheers. JD

    # September 19, 2012 at 7:45 am

    I think you can deal with this with the flexbox module. But it’s not fully supported by browsers.

    # September 19, 2012 at 8:24 am

    I keep thinking there should be a way to do this with nth-child or nth-of-type but I can’t work it out.

    # September 19, 2012 at 8:38 am

    I did it this way: http://jsfiddle.net/VAdT3/1/.

    But I can’t automatize the process with CSS only (and without flexbox).

    Edit: I even tried with inline-blocks. Same result, except I have to fix the 3px gap between elements.

    # September 19, 2012 at 10:56 am

    Cheers for all the responses guys, I’ll have a flick through and see what will work best. cheers again

    # September 19, 2012 at 10:59 am

    I’m on it for an hour now, struggling with :nth-child as Paulie suggested: no result. I can’t find a way to do this.

    It would be fairly simple with JS though: http://jsfiddle.net/VAdT3/6/.

    # September 19, 2012 at 11:12 am

    @HugoGiraudel I think the JS version is certainly the most flexible. I’m tinkering at the moment so will post my results once happy.

    Cheers again

    # September 19, 2012 at 11:45 am

    the issue I’m coming across with the JS version is ideally I don’t want to set a width, I want the container to be as wide as the number of items help within it. so that when items are added it simply gets extended, from which I can then add a scroll functionality to.

    Anyone got any smart thoughts?

    # September 19, 2012 at 9:39 pm

    http://codepen.io/wolfcry911/pen/IkBbu

    won’t work in older IE, but tested in FF and Safari

    # September 19, 2012 at 10:05 pm

    Here is another option for you: http://jsfiddle.net/joshnh/mTKFy/

    It uses @HugoGiraudel‘s concept, @wolfcry911‘s technique and some slight changes/additions of my own: mainly, the use of inline-block and text-align center to ensure that the list will adapt (and stay centered) if the number of list items changes.

    UPDATE: I have also configured it to scroll horizontally once the viewport isn’t wide enough!

    # September 20, 2012 at 3:06 am

    My god, guys, you’re brilliant. I couldn’t find a way to do this!

    # January 26, 2013 at 1:53 pm

    I’m pushing this up.

    Using @Wolfcry911‘s way and a little bit of Sass, I finally succeeded in automating the process: http://codepen.io/HugoGiraudel/pen/AxmBK

    Set the number of rows ($rows) you want, even change the size ($baseline) if you please, and enjoy this fake “float: down” thing.

    # January 27, 2013 at 11:52 am

    Awsome solution @joshuanhibbert and @Hugo

    This asks for an article, because your finding is huge.

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

You must be logged in to reply to this topic.

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