Too Much White Space In The Last Of Content Div And Before Footer Need That To Be Removed?

Hope you all will be fine..! I just started converting a PSD to HTML as i am beginner learner so did bad HTML/CSS programming,so here i am facing an issue now,that has alot of whit

Solution 1:

ok you have placed top:1250px, which is very high, so you should make it around 20-30px.

So check your style.css file and find the below code :

#footer {
 background-image: url(../images/footer_back.png);
 background-repeat: no-repeat;
 background-position: bottom;
 overflow: hidden;
 position: relative;
 top: 1250px; /* cahnge here - make it 20px */padding: 150px150px150px150px;
 }

So find the above block at style.css file and do change as mention above.

Solution 2:

Your CSS

#footer {
    background-image: url(../images/footer_back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    position: relative; 
    top: 1250px;   //  this is causing the white space..!!
    padding: 150px150px150px150px;
    }

remove this top: 1250px;

and add bottom:0; for the footer

Try

#footer {
    background-image: url(../images/footer_back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    bottom:0; 
    padding: 150px150px150px150px;
    }

or you could also give top:50px// a reasonable space

Try

#footer {
    background-image: url(../images/footer_back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    position: relative;
    top: 50px;
    padding: 150px150px150px150px;
    }

Solution 3:

You have stated top: 1250px; to the footer, that's why it's going down.

Remove the top in here:

#footer {
    background-image: url("../images/footer_back.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 150px;
    position: relative;
    top: 1250px;
}

Like this:

#footer {
    background-image: url("../images/footer_back.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 150px;
    position: relative;
}

Solution 4:

Footer div is absolutely positioned 1250px down and has a top padding of 150px.

Reduce/remove these and you should be happy. Define padding with more than one value, when two values the first one is top/bottom, second is left and right. Try

padding: 20px150px;

or adjust to taste.

P.S. This site is probably not going to look very good on tablets/mobiles - I suggest you try and get the site to look good on small displays and read articles on responsive design...