I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size.

At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window.

I can do this with tables, but can't figure out a cross-browser way to do it in CSS.

The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla.

Here's my code:

Styles.css:
PHP Code:
.banner
  
{
  
background-image:url(./images/banner-fill.gif); 
  
width:100%;
  }

.
nav
  
{
  
background-image:url(./images/nav-fill.gif);
  
width:104px;
  
height:100%;
  } 

.
content
  
{
  
position:absolute;
  
left:140px;
  
top:140px;
  } 
Template.htm:
PHP Code:
<html>
<
head>
<
title>Template</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
link rel="stylesheet" type="text/css" href="css/styles.css">
</
head>

<
body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%">
<
div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div>
<
div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div>
<
div class="content">
  <
p>Page Content</p>
</
div>
</
body>
</
html