Demonstration - Try it!
Just resize your browser (wider and narrower)!
This is a demonstration of how to resize margins with javascript (see the article on how to resize widths with javascript, basing new widths on visible browser pixels at palma-seo.com). What I wanted was to have a fixed center content layout of 960px with a fluid-like margin design that flowed naturally beyond the fixed center column.
My goal was that for all normal screen widths (1000-2000 pixels) I could create an inner frame with a background image that was fixed relative to the text, where the margins are continuations of the same single huge background image - an image that does not repeat. I recognize that there are probably a variety of ways to do this - this is just the first one that came to mind for me and so I've implemented it, and it works.
I originally wanted to do this with css only, but I couldn't think of a way to do it, so I had to use javascript. The css-only solutions I was able to come up with did not
I will probably do something similar with the screen height, so that the slider bar accurately represents the text area, rather than the full background area of the huge image.
