I just watched a video about YUI's grids and looked very promising (recommended watching!). I haven't had the time to test it out, yet, but most probably will do so in the future. It might be what you want.
Given that you have your gradients in seperate columns to the left and right, you need to implement "faux columns".
If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.
Add this after <div id="right">...</div>:
<div style="clear: both; font-size: 1px; line-height:1px"> </div>
Try with this modifications:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
<style type="text/css" media="screen">
html, body{
margin: 0 auto 0 auto;
padding:0;
width:22em;
}
#wrapper{
background-color:#ccc;
}
#left{
float:left;
width:22em;
background-color:#00f;
}
#middle{
float:right;
width:18em;
margin-right:2em;
background-color:#f00;
}
#right{
float: right;
width:20em;
background-color:#0f0;
background-image: url(static/logo.png);
background-position: top right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="right">
<div id="middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>
</div>
</div>
</div>
</div>
</body>
</html>
Got there in the end with this one, but had to make a few changes to your markup and the images.
So the markup looks like this now:
<body>
<div id="wrapper">
<img src="static/fifestock_logo.png" />
<div id="middle">
... etc ...
</div>
</div>
</body>
Then, the relevant changes in the stylesheet are:
#wrapper{
height:100%;
width:805px;
margin-left:auto;
margin-right:auto;
text-align: right;
}
#middle {
width:504px;
padding: 0 44px;
margin: -154px auto 0 auto;
background:#000 url(new_bg.png) repeat-y top left;
}
Looks fine to me.
Only tested in in FF3 and Opera (running Linux without access to Windows / Mac atm) but I don't think there should be any big issues with it in IE / Opera.
Here's what I ended up using, using this technique of high value for padding-bottom, with an equal but inverted value in margin-bottom - then you set overflow:hidden on the div enclosing that huge margin.
It's rather hackish, but it works! I now have a full-height, a single em-defined width, and a full-height background-image down each side! There's not much extra markup (a container div, a div for each of the three columns)
<html>
<head>
<title>Yay</title>
<style type="text/css" media="screen">
body, html{
height:100%;
margin:0;
background:#1d4b76;
}
#contain{
width:40em;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#left{
background-image:url("static/grad_left.png");
background-repeat:repeat-y;
background-position:right;
height:100%;
float:left;
width:150px;
padding-bottom:10000px;
margin-bottom:-10000px;
}
#middle{
float:left;
background:#000;
color:#fff;
width:20em;
padding-bottom:100000px;
margin-bottom:-100000px;
}
#right{
float:left;
background-image:url("static/grad_right.png");
background-repeat:repeat-y;
background-position:left;
width:150px;
padding-bottom:100000px;
margin-bottom:-100000px;
}
</style>
</head>
<body>
<div id="contain">
<div id="left">
</div>
<div id="middle">
Put lots of text here
</div>
<div id="right">
<img src="static/logo.png" width="150" height="150" alt="Logo">
</div>
</div>
</body>
</html>