Float items

[FartingSanta]

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

[Kitty Giraudel]

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

[Paulie_D]

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.

[Kitty Giraudel]

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.

[FartingSanta]

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

[Kitty Giraudel]

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

[FartingSanta]

@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

[FartingSanta]

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?

[wolfcry911]

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

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

[joshuanhibbert]

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!

[Kitty Giraudel]

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

[Kitty Giraudel]

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.

[Jozsef K.]

Awsome solution @joshuanhibbert and @Hugo

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

[Author]

Posts