Centered layout with div borders on left and right (with bg images) I have begun a new theme on drupal using the Boilerplate theme.
I am trying to achieve a centered(responsive width) layout with borders on both left and right sides. I have attached a diagram. DIAGRAM HERE

I have the left side borders  working fine, they are within the #PAGE div which is the one and only WRAPPER of all content. (there is no other div above it)

As i have shown in the diagram, i am having trouble with the RIGHT side borders. With the same CSS syntax as the left borders, you can see they are positioned all the way to the right, even though they are inside the #PAGE div. Why is this? why is the #PAGE div not pulling it together?

Thanks for the help!

EDIT
codejsFiddle demo/mockup

PS- these 'borders' need to hold images as backgrounds so i can not simply use the 'border' property. And the 'border-image' is not well supported. DIV's is what i need.
The main problem in your example is that your "border" &lt;div&gt;'s have position: fixed; so they refer to the viewport rather than to the parent &lt;div id="page"&gt;.

It's why you observe the right ones behaviour, which is pretty normal.
The left ones seem to refer to #page, only because they have not any left or right property set, so it defaults to auto.

Hence here is the first point: you must set position: absolute; for these "borders".

Additionaly you must remember that, for the absolute positioned element to refer to its nearest parent, this one must not have position: static, or another parent will be looked for as reference... till &lt;body&gt; if none is found, so it will be the same as for a fixed positioned element.

So here is the second point: you must set position: relative; for the parent #page.

From there you have to manage with leftand right properties to get what you want.
You can look at this fiddle, where I added the needed properties to strictly conform to your DIAGRAM exposed wills.