-Sorry, -I got distracted last night and 'surfed away' until bedtime..
Here is a quick-view version. There are *several methods* of creating this layout, this is just one.
It re-sizes nicely down to 800-width and a bit less (then begins to 'overlap'), and up to 1024-width and wider. Validates, looks the same for IE and Fx. Needs your 'footer' information. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
html, body {min-height:100%; /*for compliant browsers*/ height:100%;
font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;}
#wrapper p {color:black; background-color:transparent;}
/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */
ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
ul li a {height: 1%; /* make links honour display: block; properly */}
#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */
html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif;}
h1 {font-size: 2.0em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.0em;}
h5 {font-size: 0.9em;}
h6 {font-size: 0.8em;}/* Defined default Header sizes*/
a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/
a:link {color: #00f;}
a:visited {color: #009;}
a:focus, a:hover {color: #06f;}/* a:focus for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
a:active {color: #0cf;}
.navs {width:75px; margin-top:30px;}
.navs li {list-style-type:none; margin:10px 0 20px; padding-left:25px;}
.navs li a:link {font-size:2.1em; color:white; position:relative; top:-3px; text-decoration:none;}
.navs li a:visited, .navs li a:focus {color:black; font-size:2.0em; text-decoration:none;}
.navs li a:hover {color:black; letter-spacing:0.5em; border-bottom:2px solid white;}
.navs li a:active {color:gold}
</style>
</head>
<body style="background-color:#09f;">
<div id="wrapper" style="position:relative;">
<div style="width:auto; height:50px; background-color:#900; padding:0 30px 0 30px;">
<h1 title="Santa Fe Style Art" style="position:relative; z-index:49; width:100%; white-space:nowrap; font-size:3.8em; text-align:center; padding:15px 0 0 0; color:yellow;">Santa Fe Style Art</h1>
<h1 title="Santa Fe Style Art" style="position:absolute; top:2px; left:-3px; z-index:50; width:100%; white-space:nowrap; font-size:3.8em; text-align:center; padding:15px 0 0 0;">Santa Fe Style Art</h1>
</div>
<!-- next: CONTENT/CENTER column with image -->
<div style="position:relative; z-index:10; width:auto; height:430px; border-left:150px solid #900; border-right:150px solid #09f; background-image url(http://www.santafestyleart.com/Images/wood34.jpg); (http://www.santafestyleart.com/Images/wood34.jpg%29;) overflow-y:scroll;">
<p style="text-align:center;"><img alt="this is image ONE" src="http://www.santafestyleart.com/Images/colordpenplanssse.jpg" style="background-color:silver; width:400px; height:auto; margin:35px 0 35px 0; border:3px solid blue; " /></p>
<p style="text-align:center;"><img alt="this is image TWO" src="http://www.santafestyleart.com/Images/colordpenplanssse.jpg" style="background-color:silver; width:400px; height:auto; margin:35px 0 35px 0; border:3px solid blue; " /></p>
<p style="text-align:center;"><img alt="this is imag THREE" src="http://www.santafestyleart.com/Images/colordpenplanssse.jpg" style="background-color:silver; width:400px; height:auto; margin:35px 0 35px 0; border:3px solid blue; " /></p>
</div><!-- end CENTER -->
<div style="position:absolute; left:0; top:50px; z-index:501; height:auto; width:1-0px; background-color:transparent; padding:25px 20px 25px 20px;">
<h1 style="text-align:center;">left</h1>
<ul class="navs">
<li><a title="One" href="#">One</a></li>
<li><a title="Two" href="#">Two</a></li>
<li><a title="Three" href="#">Three</a></li>
<li><a title="Four" href="#">Four</a></li>
<li><a title="Five" href="#">Five</a></li>
</ul>
</div>
<div style="position:absolute; right:0; top:50px; z-index:501; height:auto; width:100px; background-color:transparent; padding:25px 20px 25px 20px;">
<h1 style="text-align:center;">right</h1>
<ul class="navs">
<li><a title="One" href="#">One</a></li>
<li><a title="Two" href="#">Two</a></li>
<li><a title="Three" href="#">Three</a></li>
<li><a title="Four" href="#">Four</a></li>
<li><a title="Five" href="#">Five</a></li>
</ul>
</div>
</div>
</body>
</html> The only 'important stuff' here is BOLD. Everything else is just page set-up for x-browser, etc.
Notice the header text... that IS text. By positioning two identical text-tags (with different colors) and 'positioning' one slightly askew, we get a nice 3-D effect. I thought it looked nice. ...My motivation for this is flowing away like a dam just broke... Don't lose hope! Once you 'get it', you will find yourself unable to get to sleep at night, anxious for the next build! Eager to learn some new 'trick' and use it on a site. :)
Note that this referances two of your images via absolute-path to your current site. You wopuld probably want to use the images 'relative' to the html-document (place this document in a folder with the images and referance that way).