CODEWITHSUNDEEP
csshtmlxhtmlresponsive-design
Analytic Lunatic
Analytic Lunatic

Reputation: 3934

How to make perfect div for Footer of webpage?

I'm trying to get the div for my footer (id="Footer") to be 10px from the bottom of my screen. For example, if my page content cannot fill the height of the screen, I want the div to be 10px from the bottom.

If my page content extends further than the bottom of the screen (creating a scroll area), I want the div to still be at the very bottom with a 10px margin from the bottom.

I was using position: absolute but that causes my content to fall underneath the footer div if content stretches past page screen height.

HTML: <div id="Footer" > <table> <tr> <td>&copy; Copywright 2012 Company. All Rights Reserved</td> </tr> </table> </div>

CSS:

#Footer  table {
   width: 100%;
   max-width:1250px;
   bottom:0px;
   height:30px;   /* Height of the footer */
   font-weight:bolder;
   background-color: black;
   margin-left: auto;
   margin-right: auto;
    text-align:center;
    color: white;
    font-size:20px;
    border: 3px white solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  
} 
#Footer  {
    clear: both;
    position: absolute;
    bottom: 10px;
    background-color: #15317E;
    clear: both;
    width: 1250px;
}

Upvotes: 0

Views: 8330

Answers (2)

kireirina
kireirina

Reputation: 163

In your CSS file, change #Footer to below code:

#Footer  {
    clear: both; /*may be omitted*/
    position: absolute;
    bottom: 0; 
    background-color: #15317E;
    width: 100%;
    height: 40px; /* or anything you like */
 }

In your CSS, body must have the following:

position:relative;

bottom: 0; will position your footer to the bottom no matter what.

Upvotes: 0

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

If you want to fix the problem that makes content fall underneath the footer div after adding position: absolute and bottom: 10px to the footer in the css code

You should add some css codes in body, so it should be like this

body{
    position: relative; /* to make footer in the bottom of the body*/
    padding-bottom: 45px;  /*footer heigh + 10px*/
    margin: 0; /*to make footer fill the screen width without scroll*/
}

Also you need to set the footer's height to a static number, so it will be

#Footer {
    position: absolute;
    bottom: 10px;
    background-color: #15317E;
    width: 100%;
    height: 35px;
}

Hope it will help you

Upvotes: 1

Related Questions