Why am I getting a horiz. scrollbar?

[acturnage]

OK, so I have my content inside a wrapper that is 960 px wide. In my CSS I have margin: auto; but for some reason there is more whitespace outside of my wrapper on the right side than there is on the left, causing a horizontal scrollbar to appear. This happens in all the browsers I've tried (Firefox, Chrome and IE7). I know padding and margin sometimes messes me up, so I went through and took them out one by one, but still no luck. Any ideas?


P.S. I've also zeroed out padding and margin in the html, body tags.

[PicnicTutorials]

Hi

You need to decrease the width on <div id="pop">

[RyanReese]

OK, so I have my content inside a wrapper that is 960 px wide. In my CSS I have margin: auto; but for some reason there is more whitespace outside of my wrapper on the right side than there is on the left, causing a horizontal scrollbar to appear. This happens in all the browsers I've tried (Firefox, Chrome and IE7). I know padding and margin sometimes messes me up, so I went through and took them out one by one, but still no luck. Any ideas?


P.S. I've also zeroed out padding and margin in the html, body tags.

Hi, if you could post a link to the page then it would help so muchh . ALternately post code.

[acturnage]

It's not online yet, here's the CSS. I changed the width of the wrapper from 960 px to 760 px and that seemed to do the trick, though it doesn't look nearly as nice.

html, body {
	margin: 0;
	padding: 0;
	background-color: #87b381;
	color: #fbf8a4;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	}

#wrapper {
	background-color: #000000;
	width: 760px;
	margin: auto;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 2px solid #fbf3af;
	}

.slide {
	float: right;
	}

h1 {
	font-size: 20px;
	font-family: "freestyle script", mistral, serif;
	}


	

#head h1 {
	position:relative;
	left: 250px;
	top: 125px;
	}

#nav {
	font-family: georgia, "palatino linotype", serif;
	font-size: 18px;
	float: left;
	}

#nav ul li {
	list-style: none;
	font-weight: normal;
	margin-top: 20px;
	background-color: #136108;
	width: 150px;
	border-left: 4px solid #41763a;
	border-top: 2px solid #87b381;
	}

#nav a {
	width: 130px; /* same width as ul li (minus padding), makes entire box clickable */
	display: block;
	padding: 10px;
	}

#nav a:link, #nav a:visited, #nav a:active {
	color: #fbf8a4;
	text-decoration: none;
	}

#nav a:hover {
	background-color: #fbf8a4;
	color: #000000;
	}

#content {
	clear: right;
	padding-left: 210px;
	padding-top: 10px;
	padding-right: 20px;
	}

a:link, a:visited, a:active {
	color: #c5c7c5;
	padding: 2px;
	}

#content a:hover {
	color: #136108;
	background-color: #c5c7c5;
	}

[RyanReese]

We need the HTML too I'm afraid...you don't want us guessing your HTML structure.

[Erik J]

... for some reason there is more whitespace outside of my wrapper on the right side than there is on the left, causing a horizontal scrollbar to appear.
...

Likely it is the H1 position that causes the scrollbar.

Headings are blocks constrained by the width of its container if not set. Now there is no style on #head that probably is a div block also as wide as the container. So the heading is as wide as the #wrapper, and moved 250px by the left position it is poking out to the right with 250px.

A solution could be to move the heading by a left margin instead. Then the H1 is constrained between the left margin and the container right edge and not moved outside the container:

#head h1 {
	position:relative;
/*	left: 250px; */
	margin-left: 250px;
	top: 125px;
	}

Relative positioning; the object is not moved, it is hidden in its original place with a visual copy, showed at the set position relative its own edges in the hidden position. The default coordinates are zero.

Absolute positioning; the object is taken out of the flow, removed from its place in code, floating above other objects at the set position relative the edges of its nearest container with a position. The ultimate container to refer position is the viewport. The default coordinates are auto, i.e. the browser tries to apply the coordinates of its place in code to fit the flow.

Before you use vertical margins, read in on how to avoid collapsing margins.