Reputation: 1487

Footer is covering my content

I am trying to get my footer to stay fixed to the bottom of my page + not cover any of my content.

Here is my HTML

<section id="adminpanel">
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
        <div id="accounts">
            <!--content-->
        </div>
        <div id="facilities">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div id="accordion">
             <h3>section 1</h3>
            <div>
                <!--content-->
            </div>
             <h3>section2</h3>
            <div>
                <!--content-->
            </div>
             <h3>section3</h3>
            <div>
                <!--content-->
            </div>
             <h3>section4</h3>
            <div>
                <!--content-->
            </div>
        </div>
    <div id="users">
        <!--content-->
    </div>
    <div id="newaccount_form">
        <!--form-->
    </div>
    <div id="newfacility_form">
        <!--form-->
    </div>
    <div id="newuser_form">
        <!--form-->
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>

and my CSS

html, body {
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
    border: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
}
footer {
    text-align:center;
    position: fixed;
    padding:5px;
    left:0px;
    bottom:0px;
    width:100%;
    background: #999999;
}

Here is a JSFiddle of what I have working so far.

Notice how section 4 is getting covered up by my footer.

How can I prevent this?

Upvotes: 0

Answers (3)

Timur Osadchiy

Reputation: 6239

Add margin-bottom to .content with the value equal to the height of the footer:

html, body {
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
    border: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
    margin-bottom: 60px;
}
footer {
    text-align:center;
    position: fixed;
    padding:5px;
    left:0px;
    bottom:0px;
    width:100%;
    background: #999999;
}

<section id="adminpanel">
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
        <div id="accounts">
            <!--content-->
        </div>
        <div id="facilities">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div id="accordion">
             <h3>section 1</h3>
            <div>
                <!--content-->
            </div>
             <h3>section2</h3>
            <div>
                <!--content-->
            </div>
             <h3>section3</h3>
            <div>
                <!--content-->
            </div>
             <h3>section4</h3>
            <div>
                <!--content-->
            </div>
        </div>
    <div id="users">
        <!--content-->
    </div>
    <div id="newaccount_form">
        <!--form-->
    </div>
    <div id="newfacility_form">
        <!--form-->
    </div>
    <div id="newuser_form">
        <!--form-->
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>

Upvotes: 2