I\'ve been trying to layout this page, but for the life of me, can\'t seem to get it to wor
I have to edit my answer, because after reading Lokesh Suthar's answer I finally understood your question! ;-)
There is no CSS solution! You'll find the reason in the spec (http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning):
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled.
So you have to go with a JS solution like the one Lokesh Suthar has linked to in his answer.
A personal note:
Normally web designer try to avoid horizontal scrollbars at all costs!
They are "bad" for usability and most users hate to scroll horizontally.
And instead of making a fixed positioned element wider than the viewport you should expand its height.
Remember: Using a JS solution on this will make content unreachable/ not visible if JS is disabled!