Unwanted white areas on HTML page

Question

I've made a site using with a CSS made from scratch.

The Page The CSS

Randomly there are unwanted white spaces in two places:

• Above the main content area (below the menu bar).
• Below the main content area and sidebar and above the footer.

I've experimented with various methods of fixed the problem like margins and paddings but they didn't seem to work.

What could I do to get rid of these white areas?

Answer 1

The extra white space comes from the browser's default stylesheet. Add these rules:

h2 {
    margin: 0;
}

h4 {
    margin: 0;
}

To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer's is a widely recommended one; another good option is the YUI CSS Reset.

Answer 2

You need a css reset. For example the white space below the menu bar is caused by the browser default margins of the .maincontent h2.

Personally I prefer to reset the styles for the selectors that I use, but there are general css resets like Eric Meyer's Reset CSS.

Answer 3

Your maincontent h2 and footer h4 both have margins(.83em and 1.33 em respectively) set them both to 0

Answer 4

Have you checked out your css in IE?

.maincontent { background: #0F3; height: 300px; width: 580px; float: left; }

basically, you need to add float:left; to your maincontent css

Answer 5

1.) The "Main Page" header has a top margin of 19 pixels. This causes that 19 pixel area of white space. 2.) The entire Footer has a top margin of 21 pixels. This causes that 21 pixel area of white space. Also, for fixing the issue below sidebar, solving 1 + 2 may automatically resolve this.

Answer 6

try adding the following to the top of your stylesheet:

body, h1, h2, h3, p
{
margin:0;padding:0;
}

This ensures that all browsers' default padding/margin are set to 0, so its consistent. Then you can add padding/margin where you need it.