Hi! Your design intrigued me, and I set about trying to re-create it. Here is a basic layout. You would have to use one image gradient (I called it "backgroundstrip.jpg") of about 750px width and 5px height for the background of both the body and container. The simplest way of setting the links at the bottom was to put them in a separate div underneath the "texts". I've also put borders around everything so that you can see where they go. The final design will have to take these into consideration. It works on Safari, and Opera. I haven't tried it with Chrome or IE (that's a whole bag of trouble!)
Have fun with it!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Testpage</title>
<style type="text/css">
body { margin: 0px; border: 0px;
}
#backgrounddiv {position: absolute; float: right; margin-top: 0px; margin-right: 0px; height: 950px; max-height: 950px; width: 100%; background-repeat: repeat-y; z-index: 0;
}
#mycontainer {position: relative; float: left; margin-left: 100px; width: 700px; height: 750px; margin-top: 50px; background-image: url('images/backgroundstrip.jpg'); background-repeat: repeat-y; border: 1px solid #000; z-index: 1;
}
#header {width: 700px; height: 80px; border: 1px solid #000;
}
#leftcolumn1 {float: left; clear: right; width: 30px; height: 666px; border: 1px solid red; background-color: #3b3b3b;
}
#texts {float: left; width: 498px; height: 560px; padding-left: 160px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px;
}
#navbar {float: left; clear: right; width: 150px; height: 80px;
}
#link1, #link2, #link3, #link4 {width: 150px; height: 20px; background-image: url(images\layout\Home.gif); background-repeat: no-repeat; border: 1px solid #000; display: block;
}
#rightbottom {float: left; width: 516px; height: 86px; border: 1px solid #000; text-align: right;
}
</style>
</head>
<body>
<div id="backgrounddiv"><img src="images/backgroundstrip.jpg" width="100%" height="100%"></div>
<div id="mycontainer">
<div id="header">The header comes here
</div>
<div id="leftcolumn1">
</div>
<div id="texts">
The text comes here. Padding: 10px. The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.
</div>
<div id="navbar">
<div id="link1"> Link 1 </div>
<div id="link2"> Link 2 </div>
<div id="link3"> Link 3 </div>
<div id="link4"> Link 4 </div>
</div>
<div id="rightbottom">
More stuff here
</div>
</div>
</body>
</html>