To start off, take a look at my current article blocks: http://chrisburton.me/dev
I can’t figure out the ajax issue so I was wondering if I could do something like this:
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?
Unfortunately using jQuery to help us out. There *must* be a pure CSS way that I’m missing, but this can be your fallback!
@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.
Honestly I don’t know what you’re wanting to achieve… but from my guestimation, you want your articles to be viewable across the entire screen?
@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.
Okay @chrisburton, checkout my pen now.
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.
Then again… i think you wanted your content to stay hidden … doh!
If you’re open to a jquery plugin, my recommendation for your usage would be [http://caroufredsel.dev7studios.com/](http://caroufredsel.dev7studios.com/ “http://caroufredsel.dev7studios.com/”)
Lots of customizations and will do pretty much anything you want to feed it.
The non JS solution is to use an extra div between the container and the content blocks, and put the `white-space: nowrap` there.
Edit: nevermind, it works without the extra div too… @TheDoc, maybe it didn’t work for you because of `no-wrap` instead of `nowrap` :P
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".