Bueno, le acabo de quitar todas las posiciones relativas, y continua igual:
Código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITULO</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<style type="text/css">
html,body{height: 100%;background-image: url(img/bg_clear.png);margin: 0px;}
#page-wrap{width: 960px;margin: auto;height: auto;min-height:100%;background-image: url(img/bg_white.png);}
#page-wrap:after{width: 100%;height:150px;display:block;clear:both;}
#footer{width: 960px;height: 150px;margin: -150px auto 0;background-image: url(img/bg_grey.png);}
#header{width: 960px; height: 150px;}
#title{height: 100px;margin: 0 auto;width: 363px;}
#title p{top: 30px;font-family: 'Raleway', sans-serif;color: #000000;font-size: 40px;}
#menu{width: 960px; height: 50px; background-image: url(img/bg_grey.png);}
#contact {}
#contact ul {list-style-type:none;}
#contact ul li {display: inline;padding-right: 10px;}
#contact ul li a {font-family: 'Raleway', sans-serif;color: #000000;text-decoration: none;}
#name {position: relative;margin-left: 40px;}
#name p {font-family: 'Raleway', sans-serif;color: #000000;text-decoration: none;font-size: 13px;}
#credits {position: relative;top: 55px;}
</style>
<div id="page-wrap">
<div id="header">
<div id="title">
<p>TITULO</p>
</div>
<div id="menu"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="credits">
<div id="contact">
<ul>
<li><a href="#home">Facebook</a></li>
<li><a>|</a></li>
<li><a href="#news">Email</a></li>
</ul>
</div>
<div id="name">
<p>TITULO</p>
</div>
</div>
</div>
</body>
</html>
Y lo de las etiquetas, las estoy utilizando, el footer, el header, lo que en esta estructura quiero que el header este divido en dos, en una el titulo y en la otra el nav, pero usar estas etiquetas no creo que sea la razon de ese espacio. Ademas, acabo de quitarlas y sigue saliendo...