Hi influencedesign, welcome to CF.
Are you using software to help you code your page? I ask because that code is just like I recall seeing on the web about 8-10 years ago (pre CSS), and it is much harder to work with than today's methods are.
I would think of using that image as a background in a container div and then, within that div, placing other containers 'on top', to hold/shape/style the text, as you want it, relative to the image background.
The image tends to make me think about a header footer and between three columns layout.
BTW a div is a division. Imagine a newspaper; each column represents a div. the standard at the top would be like your header div (shown below) and the columns of text would represent the left, right, and center divs.
So the code would be something like
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<title>My page title</title>
<!-- CSS Stylesheet -->
<style type="text/css" id="vbulletin_css">
* {
margin:0;
padding:0;
}
html,body {
height:100%;
background-color : #000;
background:#333;
font-family:Geneva, Arial, Verdana, Helvetica, sans-serif;
color:#40231D;
}
body {
font-size:13px;
text-align : center;
}
#container {
width:80%;
min-width:780px;
border:1px solid #FF8888;
border-top:0;
background:#000 url(/images/your_big_image.png) no-repeat;
position:relative;
padding-left:3px;
padding-right:0px;
margin : 0 auto;
}
* html #container {
height:100%;
}
#header {
margin: 0;
height:240px; /* or whatever height ensures that the top of your image is in it */
padding: 0;
border : 0;
margin-bottom : 20px;
}
#left,#right {
background:#fff;
width:150px;
float:left;
margin-right:3px;
display:inline;
border:1px solid #eee;
padding-bottom:3px;
}
#right {
float:right;
margin-right:0;
margin-left:3px;
padding-bottom:0;
text-align : center;
width : 130px;
}
#center {
margin-right:155px;/*this works together with those of left and right*/
margin-left:155px;/*this works together with those of left and right*/
background:#fff;
border:0px solid #40231D;
padding : 0 10px;
}
#footer {
clear:both;
border-top:1px solid #ddd;
border-bottom:0;
background:#fff;
margin-top:3px;
text-align:center;
color:#bbb;
font-size:.85em;
padding:20px 0;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
</head>
<body>
<div id='container'>
<div id='header'>
</div>
<div id='left'>
content here
<div class='clear'> </div>
</div>
</div id='right'>
content here
<div class='clear'> </div>
</div>
<div id='center'>
content here
<div class='clear'> </div>
</div>
<div id='footer'></div>
</div>
</body>
</html>
That code is much simpler than what you have spent time on so far. This is based on the idea that the image you posted would be the background to the container div.
We can help you with css later, which will make the divs be of a certain size and height, with set fonts etc.
I hope this is of some help and that I haven't forgotten how easy it is to make terminology confusing.
Any questions, just shout.
bazz
Edit: I have added css to the page too to give you a strat there too.
Before you post, read our: 
table/css help! urgent!
now what i need to figure out how to do is.. insert coding, so when i place content in that middle box(as shown in pic) the box extends downwards with the content. any help would be great as i need this finished pretty soon here. thanks, Alec
