CSS div sections overlapping

Question

I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.

The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.

I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.

Here is my code.

Would appreciate someone smarter than me looking at this and making any suggestions.

<style>
#header{
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    padding:0;
    margin: 0;
}
#header > img{
    width: 100%;
}

.mynavigation{
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

.mynavigation li {
    display: inline-block;
    text-decoration: none;
    padding: 15px 25px 30px 25px;
    z-index: 100;
    color: #fff;
    margin-top: 310px;
    font-family: avenirltstd-black;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.mynavigation li.is-active {
    color: #474747;
    background-color: #fff;
} 

.mynavigation li a{
color: #fff;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #474747;
    text-align: center;
}


</style>



<div id="header">
    <img src="/images/myimage" />
</div>


<div id="mynavigation">
    <!-- css makes this a tab menu and it needs to position at the bottom of the image <div>  -->
    <!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together  -->
    <ul>
        <li>Home</li>
        <li>Examples</li>
        <li>Other</li>
        <li>Last</li>
    </ul>
</div>


<div id="bodycontent">
   <!-- page content goes here and has a white background  -->
</div>


<div id="footer">
    <!-- footer content here -->
</div>

Answer 1

Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.

#header{
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    padding:0;
    margin: 0;
}
#header > img{
    width: 100%;
}

#mynavigation{
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
}

#mynavigation li {
    display: inline-block;
    text-decoration: none;
    padding: 15px 25px 30px 25px;
    /*z-index: 100;
    color: #fff;
    margin-top: 310px;*/
    font-family: avenirltstd-black;
    text-transform: uppercase;
    letter-spacing: 5px;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #474747;
    text-align: center;
}

Answer 2

Make your HTML structure like so:

<html>
    <head>
    </head>
    <body>
        <div id="header"></div>
        <div id="mynavigation"></div>
        <div id="content">
            <!-- CONTENT STUFF -->
        </div>
        <div id="footer"><!-- FOOTER STUFF --></div>
    </body>
</html>

...And your CSS like so:

html{
    padding: 0;
    margin: 0;
}

body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#header{
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#mynavigation{
    position: absolute;
    top: 350px;
    height: 50px;
    width: 100%;
}

#content{
    position: absolute;
    top: 350px;
    bottom: 100px;
    width: 100%;
    overflow: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

CSS div sections overlapping

Question

2 answers

solution1
1 2014-11-30 07:26:47

solution2
0 2014-11-30 05:57:06

CSS div sections overlapping

Question

2 answers

solution1 1 2014-11-30 07:26:47

solution2 0 2014-11-30 05:57:06

solution1
1 2014-11-30 07:26:47

solution2
0 2014-11-30 05:57:06