爲什麼我的div堆疊在一起？

Question

我正在一個移動網站上工作，並且遇到了div彼此堆疊的問題。看截圖。

你會看到「約」內容框是不透明的，並且覆蓋了標識和主頁按鈕。這是我的頭div，但不幸的是它被內容div隱藏。我是一個CSS新手，並沒有完全掌握它。我希望內容部分與標題部分（請參見實際的移動網站，上面的鏈接）有適當的間隔

這裏是HTML/CSS。

頭

<div id="header"> 
    <div id="logo"> 
     <a href="index.html"><img src="img/logo.png"></a> 
    </div><!-- #logo --> 

    <div id="home"> 
     <a href="index.html"><img src="img/home.png"></a> 
    </div><!-- #home --> 
</div><!-- #header -->  


#header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 75px; 
    background: #444; 
    z-index: 99; 
    padding: 0; 
    margin: 0; 
    display: inline; 
    float: left; 
} 
#logo { 
    padding: 15px 0 0 15px; 
    float: left; 
} 
#home { 
    padding: 25px 15px 0 0; 
    float: right; 
} 

車身/內容部分

<div id="body"> 
    <div id="content_container"> 
     <div id="content"> 
       <h1>about</h1> 
       <p>Our goal is to capture your event in the truest way possible, understanding the event, understanding how you want to present the event and then executing the event with the utmost efficiency and effectiveness.</p> 
       <p>Our goal is to capture your event in the truest way possible, understanding the event, understanding how you want to present the event and then executing the event with the utmost efficiency and effectiveness.</p> 
       <p><a href="contact.html">Contact us</a> today to find out how we can make your next event a success!</p> 
     </div><!-- end of #content --> 
    </div><!-- end of #content_container --> 

    <a href="about.html"><div class="nav"><div class="navText">About</div></div></a> 
    <a href="photos.html"><div class="nav"><div class="navText">Photos</div></div></a> 
    <a href="contact.html"><div class="nav"><div class="navText">Contact</div></div></a> 
    <div id="version"> 
     <p>Switch Version <br />Mobile | <a href="http://www.studiosimplicit.com/?force-web">Desktop</a></p> 
    </div><!-- #version --> 
    <div id="copyright"> 
     <p>&copy; 2012 Studio Simplicit. All Rights Reserved.</p> 
    </div><!-- end of #copyright --> 
</div><!-- #body --> 


    #body { 
    position: absolute; 
    display: block; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    float: left; 
} 

    #content_container { 
    background: url('../img/content_panel.png') repeat; 
    position: relative; 
    display: block; 
    width: 100%; 
    z-index: 99; 
    margin: 0 auto; 
    float: left; 
} 

    #content { 
    padding: 15px; 
} 

    #version { 
    color: #ddd; 
    font-size: 12px; 
    text-align: center; 
} 

    #version a { 
     color: #fff; 
     text-decoration: underline; 
    } 

    #version a:hover { 
     color: #888; 
     text-decoration: none; 
    } 

    .nav { 
    width: 100%; 
    height: 35px; 
    margin: 0 0 1px 0; 
    background: #333; 
    opacity: .5; 
    z-index: 9; 
    float: left; 
} 

    .navText { 
    font-family: Avenir, Arial, Helvetica, sans-serif; 
    color: #fff; 
    letter-spacing: .1em; 
    text-align: center; 
    padding-top: 8px; 
    z-index: 99; 
} 

Answer 1