Верстка, position: relative, Пустое место, как сделать правильно?

[taraba4]

Всем привет! Извиняюсь что создал новую тему. Но беглый поиск не дал результатов.

Собственно проблемма на кринах:

http://taraba4.ru/img/_1.png

http://taraba4.ru/img/_2.png

http://taraba4.ru/img/_3.png

И живая верстка:

http://taraba4.ru/hammam/

Уже не раз сталкивался с такой проблеммой, решал разными хаками и прочей лабудой...

Откуда это береться и как решать, чтобы раз и навсегда...

CSS:

.top {
  height: 505px;
}
.logo {
  position: relative;
  z-index: 10;
}

.logo img {
  display: block;
  margin: 0px auto;
  margin-top: 50px;
}

.slider {
  position: relative;
  z-index: 9;
  top: -120px;
}

.bani {
  margin: 20px auto;
  height: 150px;
}

HTML :

    <div class="top">
	 <div class="container logo">
	  <article class="row">
	   <div class="span12">
	    <img src="img/logo.png">
	   </div>
	  </article>
	 </div>
	 <div class="container slider">
	  <section class="row">
	   <div class="span12">
	    <img src="img/slider.png">
	   </div>
	  </section>
	 </div>
    </div>

    <div class="container bani">
	 <article class="row">
	  <div class="span2">
	   <h5>Турецкие бани</h5>
	   <img src="img/banya.png" alt="banya" width="" height="" />
	  </div>

	  <div class="span2">
	   <h5>Турецкие бани</h5>
	   <img src="img/banya.png" alt="banya" width="" height="" />
	  </div>

	  <div class="span2">
	   <h5>Турецкие бани</h5>
	   <img src="img/banya.png" alt="banya" width="" height="" />
	  </div>

	  <div class="span2">
	   <h5>Турецкие бани</h5>
	   <img src="img/banya.png" alt="banya" width="" height="" />
	  </div>

	  <div class="span2">
	   <h5>Турецкие бани</h5>
	   <img src="img/banya.png" alt="banya" width="" height="" />
	  </div>

	  <div class="span2">
	   <h5>Турецкие бани</h5>
	   <img src="img/banya.png" alt="banya" width="" height="" />
	  </div>
	 </article>
    </div>

[yuck]

Откуда это береться и как решать, чтобы раз и навсегда...

Почитать про позиционирование хотя бы