I want to put a scrolling div in the middle of my page.

So you want the footer to always be visible?

If so you could set a height the posts class. Then set the overflow to auto as well which will display a scrollbar for the middle area when needed.

yes.

{ height: 600px: /* (or whatever) */
overflow: auto;

...which will be a usability nightmare for anybody looking at this on their mobile device, netbook, 11" macbook air ... or their 27" iMac (or whatever massive array of plasma screens one has for gaming).

Definitely check out the CSS overflow property... but also VERY MUCH consider your audience and the context in which they might be looking at your stuff.

I own a couple e-commerce sites and 20% of my traffic (ALL TRAFFIC) is from the ipad alone. Then there is the iphone (alone), other mobile devices, and regular laptops/desktops. -- seriously. I would hate to kill 20-25% of my potential business by designing something that doesn't work that way.

I would assume that most gamers are technically aware, and clearly have enough spending cash for gadgets... and so would also guess that some portion of them will be visiting your site from their mobile phone (between classes, or at a part time job), or maybe from their x-box that is hooked-up to a big TV.

Setting a fixed-height might look okay on your monitor, but could potentially suck for other users.

Final piece of advice: There is a LOT of serious UX that needs to go into an e-commerce layout, especially because bad decisions can cost you a lot of money. If you're not a seasoned vet, I would strongly encourage you to do the following:

1) find the platform you want to built the site with (Magento, Wordpress, Volution, etc.) 2) find a well-reviewed and easy-to-use e-commerce theme (Spend $50-$100). 3) use your coding knowledge to SLIGHTLY customize it, so it fits your unique brand 4) Launch the site (PLEASE PLEASE PLEASE make sure you install Google Analytics) 5) Your e-mail list will be your gold mine, and your single best advertising tool -- give people a great reason to opt-in, and treat them well. (Mailchimp has a free version that is fine until you can cashflow the paid version)

-- after you have your business running and some analytics data from the site + your email campaigns, you can use your experience + the data to refine and redesign your site.

I promise you that you will be ever-tinkering with your site.... so, I strongly urge you to start with a good template and go from there (many template designers have experience designing that kind of stuff, or also own shops). Otherwise, if you must go from scratch, do some research on e-commerce design, conversion rates, UX, and possibly hire an experienced person as a coach, a mentor, or even as a co-designer/developer.

...but yea, overflow: auto

Thank you very much for your help guys.

I've got it to somewhere near what I want. The centre div scrolls on it's own allowing for content to exceed the space allowed. Adjusted the scroll bar so it doesn't look so boring and hopefully will show people this is a scrolling element.

Using media query, the style is being adjusted for tablet, laptop, phone and older screen sizes.

The heights of elements is fluid and using the chrome gadget for screen res, everything seems to display clearly.

I've got a fair bit of experience with ecommerce but have always tweaked template designs. It was never the ecommerce part of templates on wordpress etc I had a problem with so if I can find a way, or learn how to I should say, I'll most likely stick shopify in to handle the storefront and tweak it to my liking.

Google analytics of course are essential to any online business and will be used.

I've updated the code on codepen if anyone wants to have a look and give feedback. Link at the top but it doesn't 100% work in codepen. Typical!!!

Final step is to work out how to make it so the centre scrolling content scrolls through the entire content before scrolling the main window. Guessing jquery will allow me to do that but not so good at java or jquery at the moment.

At a window size of 782px, your sidebar images start to overflow and hide behind your footer. Somewhere in the 1879px width, they appear under the footer (my imac lets me see 2560px).

I'm not saying that media queries won't help, but from the perspective of UX design philosophy, your personal time spent, and how many media queries you want to manage, it may be worth considering a layout that doesn't have as much potential for problems (and/or something easier to manage).

It already looks like you'll have to have a media query for

+hand helds +tablets +small laptops +"standard" desktops +large monitors

(and any potential device-specific CSS you may need (retina displays, etc.)

You should also consider users with Javascript disabled, the very real potential for PAIN with multiple scrolling on a touch screen, users who need to resize the text via their browser, and on and on.

Just trying to save you from a bunch of pitfalls.

Alternate solution:

1. Keep the sidebars, but have a fluid height (ditch the center scroll. As you add more content in the center, the sidebars will get taller. (which I know is the opposite of what you want, but hear me out)

2. This creates large gaps of "white space" (which is obviously blue in this case), so to solve this:

You could find a jquery/ajax plug-in that dynamically auto-loads content as people scroll.

For "no script" users, it would fall-back to, say, 5 images, and they'd see the "white space" - gracefully degrades.

For script-enabled users, as they scroll down the page, the Ajax will retrieve new images (presumably products or featured items) and fill the empty area as they scroll. (see an example here: http://www.campaignmonitor.com/gallery/ --- go here and keep scrolling down

Same basic effect (you don't have your footer sitting in oblivion, with tons of text and empty sidebars), but it degrades well and will save you a lot of stress, trying to figure out the vertical break-points of every device in portrait and landscape mode.

1. FINALLY, consider eliminating one of the sidebars for tablet/handheld devices - you'll want to minimize the horizontal scrolling/zooming that could result from that.

In my experience, I've found (often the hard way) that it's always better to fit the design and code to the user/use-case, than it is to make the user fit the design. With the explosion of different web-enabled devices, you're going to be making a MASSIVELY clunky set of code and exceptions.

(especially once you get into browser testing with IE + mobile).

Your SEO is going to be impacted by the quality and size of your code too.

I hope that can help. I know it could sound like I'm picking on your design a bit, but I've made similar mistakes and they suck. They are expensive, time-consuming, and make one want to give up. - If my past headaches can help others avoid the same, I'm all for it!

Good luck!

(whether you take a step back and re-formulate, or whether you persist, we'd love to see the finished product!)

I had an idea, with your help, I implemented and after tweaking it...I don't like the two scroll areas. It's too clumsy and I don't like the way you scroll down a bit of the main page, then the content scrolls but get to the bottom of the content the main page has to scroll again. It's just not nice so I've decided to go back to an iteration I had previously which is what you've described.

Sidebars match content height with images spaced out. However, I'm getting stuck making the sidebars stretch properly. They're not reaching the bottom of the content as they should.Unless I put content in or space the content, the sidebars stop mid page. I don't want to have to use content to expand the height as this will cause problems with scaling onto other resolutions.

I do intend to rewrite the page using flexbox as I came across this yesterday and it looks awesome.

I only started learning 2 weeks ago so it's a case of trial and error at the moment. Lot's of fresh starts to put into practice lessons learnt from earlier attempts.

The only issue with flexbox is it's support. If you want this site to be widely available (such an ecommerce site) I wouldn't recommend it. Especially if you want to support mobile browsers.

http://caniuse.com/flexbox

I'm going to have to do alternate CSS for cross compatibility. Remove all the "plug-ins" for Explorer, Safari and older browsers. I can get a very good idea of how I want the site to look by using flexbox for Chrome, Opera and Firefox.

I think I'll go down the route of making dedicated sites for mobile applications like tablets and phones. As the site will incorporate news, reviews, media as well as a store, it'll need a great deal of redesign to be simple to use...I think!

It is ridiculous that Microsoft won't accept that things like CSS3 and flexbox are the future and adapt. It's just stubborn. It's what I've gleaned from my short time in the web design world so far.