CODEWITHSUNDEEP
htmlcss
stack_newbie23
stack_newbie23

Reputation: 129

Extra white space on bottom of website

I'm building a website and can't figure out where this extra whitespace is coming from. I tried using different padding and margin scenarios, but I can't get it to work.

body {
font-family: 'Open Sans', sans-serif;
margin-bottom: 1px;
}

Last few lines of html..

        </ul>
      </div>
    </div>
  </div>
</body>

Screenshot of bottom of site https://i.sstatic.net/GcOnL.png

Not sure what else you would need to figure this out, please let me know. I was reading and it seems there is some set margin that has to be fixed.

Upvotes: 2

Views: 255

Answers (4)

user1793182
user1793182

Reputation:

Try using your browser's property inspector. Just right click the specific part of your web page and click Inspect Element (if you're in Google Chrome). Firebug is a Firefox/Safari/IE plugin that works the same way. From the inspector you can turn on/off css styles and see what the styles are behind a block of content. Write down the css style and edit the css file outside of your browser.

Upvotes: 0

Casimir et Hippolyte
Casimir et Hippolyte

Reputation: 89547

edit:

The problem comes from #content div that is out of the flow (since it is a float), and have a height of 100%, but since it is out of the flow, the percentage refers to the whole page size but not to this container. To solve the problem, you need to give it the same height than his container (80%):

#content div {
    float: left;
    height: 80%;
}

old answer:

I think that your white space come from your html code. Removes all white spaces between your last closing tag and the closing body tag.

example: 

    </div>
</body>

=>

    </div></body>

Upvotes: 0

sparklyllama
sparklyllama

Reputation: 1326

All pages have padding on them. To remove this, you can use this in your stylesheet:

* { // asterisk meaning 'all elements'
    padding: 0px;
    margin: 0px;
}

Upvotes: 1

recoup8063
recoup8063

Reputation: 4280

If you are trying to remove all padding 

html, body{
    padding: 0 !important;
    margin: 0 !important;
}



Browsers often automatically add this padding.

Upvotes: 1

Related Questions