just looking at the rendered version, and not the code that could be done with css.
it would be somewhat of a complicated floating structure, but basically it would look something like this, without getting too indepth
body {
background: #cccccc url('__path_to_left_image__') repeat-y top left;
}
div#container {
background: #ffffff url('__path_to_right_image__') repeat-y top right;
text-align: left;
}
div#left {
float: left;
width: 20%;
color: #ffffff;
}
div#left h3 {
display: block;
background-color: #000000;
color: inherit;
}
div#left ul {
background-color: #0000ff;
color: inherit
}
div#left ul li {
display: block;
list-style-type: none;
}
div#left ul li a#LocalLink {
text-indent: -1000px;
background: url('_local_link_image') no-repeat top left;
}
div#right {
float: right;
width: 74%;
}
div#right div {
clear: both;
display: block;
text-align: left;
}
div#right div h2 {
text-align: center;
}
div#right p.leftEl {
float: left;
width: 45%;
}
div#right p.rightEl {
float: right;
width: 45%;
}
div#footer {
clear: both;
}
<body>
<div id="container">
<div id="header">
<h1>Onion House Productions</h1>
<ul id="nav">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="left">
<h3>HEADER</h3>
<ul class="localNav">
<li id="LocalLink">link</li>
<li>link</li>
<li>link</li>
</ul>
<h3>HEADER</h3>
<ul class="localNav">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
__Ads__
</div>
<div id="right">
<div>
<h2>Onion House Products Services</h2>
<p class="leftEl">
<h3>HEADER</h3>
<ul>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</p>
<p class="rightEl">
<h3>HEADER</h3>
<ul>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</p>
</div>
<div>
<h2>OHP Client Services</h2>
<p class="leftEl">
<h3>HEADER</h3>
<ul>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</p>
<p class="rightEl">
<h3>HEADER</h3>
<ul>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</p>
</div>
</div>
<div id="footer">
__Footer__
</div>
</div>
</body>
if you cannot follow that then let me know which part you have having difficulties on and I will explain it more.
I will tell you right now that you need to watch out for IE6 and below rendering the middle "gutter" when floating elements.
The best way to do this is with percentages, however if you do find yourself using absolute values, be sure to leave yourself a big gutter, and if you can test is on IE6 to make sure that your elements are not "stacking" rather than being displayed inline