Question

I’m working on a mobile site and am having an issue with div’s stacking on top of one another. See screenshot.

You’ll see that the “about” content box is opaque, and is covering up the logo and a home button. That’s my header div but unfortunately it’s hidden by the content div. I’m a CSS novice and don’t quite have the hang of it yet. I want the content section to be properly spaced from the header section (see the actual mobile site, link above)

Here’s the HTML/CSS.

Header

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

Body/content section

<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