controlling height using CSS

Question

Im developing a website and in my page, after every HTML elements ends, their is an extra vertical height as I scroll down. It makes my page look bad. I want the scrolling to go as far as the last div I've written. Is there something I can do to fix it??

Edit:

Here's the link http://pebam.info/projects/careermanipur.com/ I tried checking out using firebug but I can't figure it out.

At the footer section, I want the vertical white space gone so that the page ends with the grey part.

Answer 1

It could be the default margin on the body tag, you can zero that out with this style:

body { margin:0px; padding:0px; }

Can you post a link to the site so I can inspect?

One other possibility is that some elements will cause trailing whitespace if there is whitespace in your code.

So look for places where you have this:

<div>
 <a href="#foo">some random link</a>
</div>

And convert to (for the purposes of identifying the problem, you can re-format/indent later when you identify where the problem is):

<div><a href="#foo">somerandomlink</a></div>

Also make sure you dont have any self-closing divs

Additionally, what DOCTYPE are you using?

Answer 2

Without knowing the source code, I'm just going to tell you all the generic responses and hopefully one will work for you.

<DOCTYPE html> Declare your page with a doctype

body {margin:0; padding:0;} Reset margin/padding on all elements

p {line-height:1.1em;} The trailing white space might be the line-height of your elements?

If none of these suggestions work, download Mozilla Firefox web browser, install Firebug add-on, open it inside your web page, and use the inspect element (ctrl+shift+c) feature to inspect the problem elements. Once you click on an element you can view its style, layout, and computed values from Firebug. This is almost guaranteed to show you where the error is.

Answer 3

Your footer tag has a top:-50px on it. This is where the white space at the bottom is coming from -- The box is being moved up 50 pixels, but the space for it is being kept.

You need to re-work your layout to remove the way you're shifting everything up by 50 pixels.