为什么我的div堆叠在一起？

Question

我正在移动网站上工作，并且我遇到了div在彼此堆叠上的问题。见截图。

你会看到＆＃34;关于＆＃34;内容框是不透明的，并覆盖徽标和主页按钮。这是我的标题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