Problema con posicion relativa y espacio extra

[bengiss]

Hola a todos,

Tengo un problema con mi hoja de estilo CSS, les coloco el codigo primero para que se entienda mejor:

Código HTML:

<div id="header-gradient">
 
</div>
<div id="contenedor">
  CONTENIDO PRINCIPAL
</div>
<!-- 
ESPACIO DE 168px ADICIONAL 
-->
 

Código CSS:

#header-gradient {
  height: 168px;
  background: #fbfaf5 url(../img/bg2.jpg);
  width: 100%;
}
 
#contenedor {
  width: 730px;
  margin: 0 auto;
  position: relative;
  top: -168px;
  background: #FBFAF5;
}
 

El div #header-gradient se expande a todo el ancho de la pantalla con una imagen de fondoy un alto de 168px, el #contenedor tiene el contenido principal de la pagina y con la posicion relativa y top: -168px lo posiciono sobre el header, hasta aqui todo bien. El problema es que debajo del div #contenedor se agrega un espacio de 168px adicional.

Existe alguna forma de eliminar este espacio?

Gracias de antemano.