You have your #news div in your HTML immediately prior to the #leftbox div. The problem is the #leftbox is sitting over the top of your #news container since you've moved the #news down from its original location so it ends up underneath #leftbox. So you have a z-index problem since items that come later in the HTML will sit on top of the stuff that comes earlier.
I normally don't mess with z-index much because different browsers don't deal with it the same. It's better to rely on the natural flow of the HTML. However, you should be able to resolve the issue by either redesigning the page to allow #news to come after the #leftbox (or even sit inside it) or setting the z-index on #news to be higher than the z-index on #leftbox.
Not really about this "non-clickability" thing, but I'd change your background image b/c of the weird end I get on my wide screen. (A common starting-out problem. Don't worry.)
In order to make sure that there isn't an image-stop, you should really use a technique called "slices" - meaning, you create a very thin "slice", either tall or wide and then repeat it so that it blends.
Right now, you're using an 1800 px image which is usually large enough for most people - but for me, it's not.
If I were you, I'd take out all of the speech bubbles (which are balanced poorly) and the gray box (I tend to not mix bg images w/ the content on-page) and the guy talking. If you really need them, you can use divs to put the image in.
Next, go into PS, or whatever image-editing software you use and make a very thin slice of a gradient. If I were in PS, I'd create a new document at, say, 1px (wide) by 280px (height) and then make a gradient running top to bottom.
Save that, set it as your background image, and then repeat-x the image. That will give you a nice smooth gradient that goes on...forever!