Cannot push FOOTER to the bottom of page

Question

I am not good in web-designing, I am working on a web template that was automatically generated by Adobe Dreamweaver.

I want to push the footer's DIV to the bottom of page even I have no content on the page.

This is .CSS (I have omitted some of it)

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}

.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto;
}

.header {
    background: #ADB96E;


}
.sidebar1 {
    float: left;
    width: 180px;
    background: #EADCAE;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 780px;
    float: left;
}


/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    background: #CCC49F;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the 
}

And this is the common markup of my pages.

<body>

    <div class="container">

       <?php 
    include('templates/header.php');
    include_once('templates/sidebar.php'); 
       ?>
        <div class="content">
        <!-- end .content --></div>
         <div class="footer">
            <p>This is a simple footer.</p>
         <!-- end .footer --></div>
    <!-- end .container --></div>
</body>

And footer on page looks like

enter image description here

I have tried this for footer.

position: fixed;
bottom: 0;
width: 100%;

But then page looks like

enter image description here

@Lorenzo you stole my words! Those don't know answer, they downvote. — Umair Ayub, May 22 '14 at 05:41

score 0 · Answer 1 · answered May 22 '14 at 04:59

0

Here is a solution that I use, its a HTML 5. But this should work for you. Just change the class and you should be good to go.

footer {
    background: #000;
    position: absolute;
    bottom: 0px;
    display: flex;
    height: 40px;
    width: 100%;
}

See Fiddle

Also you can use the fixed position approach which works just as good or better

footer {
    background: #000;
    position: fixed;
    bottom: 0px;
    display: flex;
    height: 40px;
    width: 100%;
}

answered May 22 '14 at 04:59

Cam

1,884
11
24

Did you look at the fiddle?? – Cam May 22 '14 at 05:03
Yes, it does come on the bottom, but see the second image in my question, look at background color of page's content, it is changed – Umair Ayub May 22 '14 at 05:08
That is because you are floating your .sidebar1. You cant float. FLoating moves elements outside of the DOM. Remove float and add Display:inline-block.. Problem solved. – Cam May 22 '14 at 05:09
Whatever element is sidebar should have display: inline-block. The element preceeding it will align accordingly – Cam May 22 '14 at 06:22

score 0 · Answer 2 · answered May 22 '14 at 05:03

Check the DEMO.

Check the 3 lines at bottom are responsible to keep the footer at bottom.

.footer {
padding: 10px 0;
background: #CCC49F;
clear: left;
/*Below 3 lines are the responsible to keep it at bottom*/
position: absolute; 
bottom:0;
width: 100%;
}

user3470953 · Answer 3 · 2014-05-22T05:22:59.947

you can try

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    .container {
        width: 960px;
        margin:auto;
        min-height:100%;
        position:relative;
        background: #FFF;
    }

    .header {
            height: 50px;
        background: #ADB96E;
    }

    .sidebar1 {
        float: left;
        width: 180px;
        background: #EADCAE;
        padding-bottom: 10px;
    }
    .content {
        background:#5ee;
        padding: 10px 0;
        width: 780px;
        float: left;
    }
    .content {
        padding-bottom:80px; /* Height of the footer element */
    }

    .footer {
        width:100%;
        height:80px;
        position:absolute;
        bottom:0;
        left:0;
        background: #CCC49F;
    }
</style>
</head>
<body>

<div class="container">
    <div class="header">        
    </div>
    <div class="sidebar1">      
    </div>
    <div class="content">       
    </div>
    <div class="footer">
        <p>This is a simple footer.</p>
    </div>
</div>

</body>

Cannot push FOOTER to the bottom of page

3 Answers3

Linked