Div mit 100% Breite drängen Inhalt ohne Grund

Question

Ich habe ein Problem mit Divs, die auf 100% Breite eingestellt ist und sich nicht berühren sollte. Das zweite div verschiebt den Inhalt im ersten div nach links.

Die zwei Divs sind und. Es wird ein Z-Index für die Navigation gesetzt, um das Logo anzuzeigen.

können Sie die Push sehen hier: http://www.sayhistudios.dk/ im Vergleich zur Unterseite, wo die angezeigte Navigation hier richtig: http://www.sayhistudios.dk/om-bager-bosse/

Der Code ist die folgende.

<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

Sie benötigen postion:absolute (oder etwas Gleichwertiges) hinzuzufügen und z-index:-1 zu .bannertop. Dadurch verlässt es das Boxmodell der Seite und wirkt sich nicht auf die Position anderer Elemente aus und erscheint nicht hinter anderen Elementen.

Eine bessere Lösung Allround wäre, um Ihr Bild background-imagebody zu machen.

Edit:

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