div with 100% width pushing content without reason

Im having a problem with to divs that is set to 100% width and shouldn't touch each other. The second div is pushing the content in the first div to the left.

The two divs are and . There is set a z-index to the navigation to display the logo.

You can see the push here: http://www.sayhistudios.dk/ compared to the sub page where the displayed navigation is correct here: http://www.sayhistudios.dk/om-bager-bosse/

The code is the following.

<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;
} 

---

You need to add postion:absolute (or something equivalent) and z-index:-1 to .bannertop. This causes it to leave the page's box model and so not affect the location of other elements, and to appear behind other elements.

A better solution all-round would be to make your image the background-image of body.

Edit:

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