Hi,
The problem is that you have used the wrong positioning system with all your elements. Position:relative wasn't designed for laying out a whole page and is causing the problems you have.
position relative moves an element in relation to itself but as far as any other elements on that page are concerned the elements remains where it was. This is why you get loads of white gaps around the page where elements were until you moved them somewhere else.
You should be using absolute positioning or floating elements or no positioning at all (static). Position relative is used for small scale effects and nudging elements on top of other elements without altering the structure or flow of the page. If you need to use relative positioning for anything else then the chances are you are doing it wrong. (there are some exceptions of course).
You need to replan your playout into a logical order and use a mixture of static, absolute and floated elements to achieve your layout.
As I have no idea where you are going with this layout then this code may be totally wrong for you, however it should give you some ideas on how to construct things.
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>tremorchrist.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Tremor Christ. Australian Pearl Jam Fan Website and Forums" />
<meta name="keywords" content="tremorchrist, pearl jam, australian, vedder, pearl jam forums, trading, concert, tour" />
<style type="text/css">
body {margin:0px; padding:0;background-image:url('http://www.tremorchrist.net/marb009.jpg'); background-repeat:repeat;}
#nav {float:left;width:150px; background-color:#E6C531; margin-left:20px;; margin-top:50px;}
#nav a, a:hover {text-decoration:none; color:#000;}
#nav a:hover {color:red;}
#nav ul {list-style-type:none; font-family:verdana, arial; font-size: 0.7em; margin:7px;}
#contentwrapper{
margin-left:180px;
}
#content a, a:hover {text-decoration:none; color: red;}
#content a:hover {color:blue;}
#content {font-family: verdana, arial; font-size: 0.7em; color:#000;}
#contentimg {text-align:center;margin-top:50px;}
#header { height:90px;background-image:url('http://www.tremorchrist.net/headbgsm.jpg'); background-repeat:repeat-x;}
#footer { height:60px; background-image:url('http://www.tremorchrist.net/footerbg.jpg'); background-repeat:repeat-x}
</style>
</head>
<body>
<div id="header"><img src="http://www.tremorchrist.net/header.jpg" alt="tremorchrist.net"/></div>
<div id="nav">
<ul>
<li><a href="index3.html">Home</a></li>
<li><a href="<A href="http://tremorchrist.net/forums/index.php">Forums</a></li">http://tremorchrist.net/forums/index.php">Forums</a></li>
<li><a href="gallery.html">Photo Gallery</a></li>
<li><a href="memberphotos.html">Members Photos</a></li>
<li><a href="trading.html">Aussie Trading</a></li>
<li><a href="tourarchive.html">Oz Tour Archive</a></li>
<li>Link7</li>
<li>Link8</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentimg" ><img src="http://www.tremorchrist.net/images/knees.jpg" alt="" />
</div>
<div id="content">
<p>some more text</p>
</div>
</div>
<div id="footer"> </div>
</body>
</html>
You will see that the code is much simpler 
Take a look at the FAQ on positioning to help you understand the basics as this will help you with the layout.
Paul
Bookmarks