After searching through various posts, I couldn't find the solution I needed. Currently, I am working on a design in Photoshop and foresee a potential issue when translating it into html+css.
Picture this: my center div is set at 960px with a semi-transparent .png background. The design requires this div to be inside a larger div set to 100% width. However, the problem arises when applying a background image to the outer div that runs the full width of the page. If the background crosses the center 960px portion, it creates a double thickness effect in the middle.
In essence, I am looking for a way to create elastic divs on either side or prevent the background from extending across the center 960px region of the browser window.
I am unsure of how to achieve this without resorting to using JavaScript to adjust widths, which is something I'd prefer to avoid.
Any suggestions or ideas?
To better illustrate the issue, here is a link to a basic example: http://jsfiddle.net/8Bznc/1/