I'm having trouble with adding borders to the page. If I use a background image for the body that contains both the left and the right borders; it works. But, obviously, it won't scale and it's a big image. However, If I use 2 images, I add a left-top border to html and a right-top border to body, It will not work.

This is the effect I'm trying to do: http://www.studioindustryllc.com/misc/newlayout.jpg
Ignore the text, it's a place-holder text.

XHTML: http://www.studioindustryllc.com/misc/new-layout/mockup.html
CSS: http://www.studioindustryllc.com/misc/new-layout/mockup.css
Images: http://www.studioindustryllc.com/misc/new-layout/img/global

Right, now as a background, it uses http://www.studioindustryllc.com/misc/new-layout/img/global/body-background.png . The separate margins are http://www.studioindustryllc.com/misc/new-layout/img/global/body-margin-left.png and http://www.studioindustryllc.com/misc/new-layout/img/global/body-margin-right.png .

The banner has a background image that creates the green borders and shadow.
The problem is that it won't scale. I could modify the banner to include the borders, but I'll have to modify all: http://www.studioindustryllc.com/misc/header.jpg

PS: Please give points on how to make the site scale. This is my first time not being a Pixel NAZI.

However, it looks like Opera doesn't like setting the font on HTML. It makes the page real tiny:

html
{
background: #fff url(img/global/body-margin-left.png) repeat-y top left;
width: 46.8em;
margin: 0 auto;
}

body
{
font: 62.5%/1.7em Verdana, Geneva, Arial, Helvetica, sans-serif;
background: #fff url(img/global/body-margin-left.png) repeat-y top right;
margin-left: 5em;
width: 70em;
}

for FF this fixes it.

html, body { height: auto; }

to work with IE it might need

html,body { height:auto !important; height:100%; }

and even then you might want a min-height of 100% in there too, depending on how much stuff will be going on your pages.

Once you switch over to the XML parser instead of the HTML one the heights on some stuff (mainly just BODY and HTML) aren't assumed to work the same way. If you have a page with very little content on it, for example, your backgrounds will still end at the end of it since even the BODY and HTML elements aren't assumed to go the whole height of the browser window, just to expand to the height of the content.

I know what the problem is. h2, and #page are floated. I think I have to use absolute positioning instead.

auto won't work. html does not seem to go 100% of the window, but the background does.

I've been playing with background-colors. It looks like a background on html fills the entire screen no matter what the height of HTML is: See http://www.studioindustryllc.com/misc/new-layout/test.html (look at the source code and what's rendered)

Do any of you know how to make that h2 have a height of 100% like in the screenshot? If I set it to absolute, it goes over the footer way down.