Here's my problem:
I basically have a container div and 3 divs within that. 1 for the top content graphic(brown) 1 for the middle content, which scales vertically as needed(cyan) and 1 for the footer content graphic(brown).
Because the design has elements that frame the content(EX: drop shadow). I set the width to 1100px and use margins to push the content within the design. This creates a vertical scroll at 1100px or smaller(I need it to only scroll when the browser is smaller than the content width, not the design elements outside it).
The actual content width is represented by the green lines and the design width is represented by the red lines. I need a way for the browser not to worry about the design and only base the site width off the content(green lines) which is, obviously smaller in width than 1024px. This needs to be accomplished with all 3 divs while still maintaining the ability to stretch vertically depending on the content in the middle. Am i going about this the wrong way? I'm open to anything. Please help.