# 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 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 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!# January 26, 2013 at 1:53 pm
I’m pushing this up.
Set the number of rows ($rows) you want, even change the size ($baseline) if you please, and enjoy this fake “float: down” thing.
You must be logged in to reply to this topic.