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