I can’t figure out the ajax issue so I was wondering if I could do something like this:
click to see larger version
The container of the article blocks have a hidden overflow while the article blocks are inline-block. The problem with this is, if I set a width to the container, the blocks would not be inline anymore. They would drop underneath each other instead of hidden off the page. Does this make sense?
@TheDoc Damn. I hope there is a CSS solution as well. Maybe absolute positioning? The only issue I see with your version is that if I increase the width of the blocks, they wrap underneath each other. The reason this can’t happen is because I will be using a jQuery click function to slide in the next set of blocks. Much like what I’m doing with ajax in the above link.
@yeeyang If you look above at the image, I want an infinite row of content blocks that has a container of overflow hidden (so it only shows a set of 3 at a time). Then, with an on click function using jQuery, slide in the next 3 blocks. Make sense?
Take a look here: http://chrisburton.me/dev. Click on the arrows. That is what I’m trying to accomplish without ajax since I can’t figure out a bug.
I removed the `position: relative` from your `.container` and added a `div.wrapper` around everything and set that up as a `position: relative` to establish a positioning context. Then kept the `position: absolute` on your `.inner-container`, which should snap to it’s closest parent positioning context, which is now `.wrapper`.
Used a bit of jquery to figure out the width and set that up for the style of `.inner-container` and got your buttons hooked up to animate…
you’ll want to tweak it and clean it up but I think that’s what you’re looking for.