Question

No matter what I try my footer stays on the bottom of my screen and not after my content like I need it to be. Its stays at the bottom of my screen and over my content that it's supposed to be under. I put my header (not in the jsfiddle), content, and footer div inside a wrapper that has 100% height. here is the jsfiddle jsfiddle The footer doesnt even show up on the fiddle!!!!

CSS

body{

    background-color: #555;
    margin: 0;   
    padding: 0;
    height: 100%;

}

#wrapper{
    min-height: 100%;
    position: relative;
    height: 100%;
}

#content{
    top: 140px;
    position: absolute;
    height: 90%;
    width: 100%;
    font-family: 'Times New Roman', Times, serif;
    padding-bottom: -70px;
}

#content h2{
    text-align: center; ;
    color: white;
    margin: 50px auto;
    width: 60%;
}

/*Footer*/
#footer{
    width: 100%;
    height: 70px;
    background-color: black;
    color: white;   
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9999;
    }

#footer p{
    padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
<body>

<div id="wrapper">

<div id="header"></div>  

<a href="restaurant_reserve.php"><button id="reserve-button" class="w3-btn-block w3-hover-white" style="font-weight: bold; font-size: 15px; position: fixed; top: 100px; z-index: 999;">Reserve Now!</button></a>

<div id="content">

    <img style="width: 100%; height: auto;" src="images/slider/examples/slide-example3.png">

<h2><strong>Come and devour Friendz' hunger satisfying selection of the
    most delectable soul foods around!</strong>
</h2>

<div class="info-block1">
    <img src="images/restaurant_examples/example1.jpg" title="Chicken breast with veggies" alt="Chicken breast with veggies">
    <p> Come and enjoy our delicious chicken breast and vegetables. This is just test text that is
    be used for demonstration and to take up space.</p>   
</div>

<div class="info-block2">
    <img src="images/restaurant_examples/example2.jpg" title="Some type of food" alt="example2">
    <p> This is just generic text. I am writing and typing this off of the top of my head
    and it is meant just to take up space.</p>   
</div>

<div class="info-block1">
    <img src="images/restaurant_examples/example3.jpg" title="Some type of food" alt="example2">
    <p>This is even more generic text that is being used to take up 
        space and demonstrate potential formatting of the website.</p>
</div>

<div class="info-block2">
    <img src="images/restaurant_examples/example4.jpg" title="Some type of food" alt="example2">
    <p>Lorem ipsum dolor sit amet, fabulas phaedrum mea no, an eum utinam 
        libris dictas, audire expetenda eu quo.
    </p>
</div>

</div>

<div id="footer">
    <p>Footer Test</p>
</div>

</div><!--end wrapper div-->


</body>
</html>

Please help

Answer 1

Change the #footer's 'position' to relative.
Put the #footer div inside the #content div.

Why are you setting the z-index for the #footer if you want it after the content instead of over? Also, get rid of your inline css, that's what .css files are for..

Why doesnt my header stay under my content?

1 个答案: