Centered layout with div borders on left and right (with bg images)
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.