Browser scroll bar appearing despite dimensions of content.

Question

Hello Everyone,

Bear with me as I try to describe my problem.

I have auto-aligned the content of a web page so that it appears in the center using the following code:

/* Universal Rules -------------------------------------------------- */
body {
    margin: 0;
padding: 0;
background: #fff;
color: #333;
/* font sizing in ems, baby. if you want to change anything, just change this.*/
font: 75%/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ahem, hr { display: none !important; }
img { border: none; }
form { margin: 0; }
.floatleft, .alignleft { float: left; margin: 0 1em 1em 0; }
.floatright, .alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.clearboth { clear: both; }

All of my content is also wrapped in a div called "page" that has the following parameters:

#page {
    width: 960px; 
margin: 0 auto;
}

I don't understand why then, when you open up the page in a browser window that is clearly wider then the 960px width of the content, does the scroll bar on the bottom appear (as if there is more content to be seen on the edges).

Here is the website so you can play with it and see what I'm talking about. I hope my question is clear. Please don't hesitate for clarification. I'm hoping to solve this without changing my code too much.

Thanks

Answer 1

In your table, you set a min-width of 180px for the 'contact'. To make room, the page gets pushed to the right. Remove that if you can to fix this.

btw, you put a div inside the h2 element. This is not allowed and is invalid.

Answer 2

Alternatively, you can add the css overflow: hidden ; to the first table inside the div with id header.

What is happening is that the "Contact" table cell is wider than the table and is expanding the width of the page.