too much white space in the last of content div and before footer need that to be removed?

Question

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 white space right in the last of content and before footer which need to be removed.

here is the link to the Index.html page : http://www.webngraphicssolutions.com/urgent_psd/index.html

waiting for you people replies..

Answer 1

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: 150px 150px 150px 150px;
    }

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: 150px 150px 150px 150px;
    }

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: 150px 150px 150px 150px;
    }

Answer 2

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: 150px 150px 150px 150px;
 }

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

Answer 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;
}

Answer 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: 20px 150px;

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...