div со 100% шириной толкает содержимое без причины

Question

У меня проблема с элементами div, для которых задана ширина 100%, и они не должны касаться друг друга. Второй элемент перемещает содержимое первого элемента влево.

Два div - это и. Для отображения логотипа установлен z-index для навигации.

Вы можете увидеть толчок здесь: http://www.sayhistudios.dk/ по сравнению с подстраницей, где отображаемая навигация здесь корректна: http://www.sayhistudios.dk/om-bager-bosse/

Код следующий.

<div id="nav">
 <div id="nav_wrap">
 <a href="http://www.example.com"><img src="<?php bloginfo( 'template_directory' ); ?>/images/logo.png" id="logo" /></a>
  <ul id="main-nav">
   <?php wp_list_pages('title_li='); ?>
  </ul>
 </div>
</div>
<br clear="all" />
 <div class="bannertop">
  </div> 
<br clear="all" />

    /* Navigation */

#nav{
     background-image: url('images/nav_bar.png');
     height:44px;
     width:100%;
     z-index:0
     overflow:hidden;
}
#nav_wrap {
     width:900px;
     margin:0 auto;
}

.bannertop {
     width:100%;
     background-image: url('images/bbg.png');
     height:410px;
     margin-top:200px;    
     z-index:-1;
} 

Answer 1

Вам нужно добавить postion:absolute (или что-то эквивалентное) и z-index:-1 в .bannertop. Это заставляет его покидать блочную модель страницы и, следовательно, не влиять на расположение других элементов и появляться за другими элементами.

Лучшим решением было бы сделать ваше изображение background-image из body.

Edit:

.bannertop {
     width:100%;
     background-image: url('images/bbg.png');
     height:410px;
     margin-top:200px;
     position:absolute;
     z-index:-1;
}