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.
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.
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!
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
I think you can deal with this with the flexbox module. But it's not fully supported by browsers.
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.
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.
Cheers for all the responses guys, I'll have a flick through and see what will work best. cheers again
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/.
@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
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?
http://codepen.io/wolfcry911/pen/IkBbu
won't work in older IE, but tested in FF and Safari
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!
My god, guys, you're brilliant. I couldn't find a way to do this!
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.
Awsome solution @joshuanhibbert and @Hugo
This asks for an article, because your finding is huge.