Beginner layout problem

[FREEZX]

I have a problem with my layout. I'm designing a fixed-size layout and whenever i go to a longer page on which my browser has a scroll, it's shifting a bit on the left. i understand this would be because then my registered browser width is decreased for few pixels, but it's a bit annoying. can anyone suggest something i could try to fix this issue? This is my code:

body {
color: #594c44;
margin: 0px;
padding: 0px;
background-color: #594c44;
background-image: url(gradient.png);
background-attachment: fixed;
background-repeat: repeat-x;
}
body,th,td {
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #000000;
}
div#stripeup {
background-image: url(upstripe.png);
width: 100%;
height: 30px;
border-radius: 10px;
-moz-border-radius: 10px;
}
div#header {

position: relative;
height: auto;
}
div#container {
text-align: left;
width: 800px;
margin: 0 auto;
}
#navigation
{
	border-radius: 10px;
	-moz-border-radius: 10px;
	border-style: solid;
	border-color: #594c44;
	float: left;
	width: 794px;
	background: #f3e5cb;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	text-align: center;
	list-style-type: none;
	display: inline;
}

#navigation li a
{
width: 13%;
	display: block;
	float: left;
	padding: 5px 10px;
	color: #594c44;
	text-decoration: none;
	border-right: 2px solid #594c44;
	border-left: 2px solid #C4B8A1;
}
.curloc
{
font-weight: bold;
text-align: center;
}
#navigation li a:hover { 
background: #594c44;
color: #f3e5cb;
border-left: 2px solid #4D413D;
border-right: 2px solid #4D413D;
}

div#content {
border-radius: 10px;
-moz-border-radius: 10px;
color: #594c44;
float:left;
width: 780px;
background-color: #f3e5cb;
padding: 10;
padding-bottom: 20;
}
div#pics{
display: block;
width: 780px;
margin: 0 auto;
}
div#content h1, p {
line-height: 1.5;
margin: 10px;
}
div#footer {
border-radius: 10px;
-moz-border-radius: 10px;
background-image: url(downstripe.png);
font-weight: bold;
color: #291c14;
clear: both;
width: 100%;
height: 16px;
padding-top: 7px;
padding-bottom: 7px;
}
div#footer p {
margin: 0px;
padding: 0px;
}
div#footer a {
display: inline;
padding: 5;
color: #594c44;
}
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #594c44;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #594c44;
padding: 5px;
z-index: 5;
}

[teedoff]

Are you sure the "shift" is created from the addition of the scroll bar itself. Meaning that a page without the scroll bar is "centered", then when you click on a page that needs a scroll bar, the scrollbar takes up 15px therefore "shifting" the page to the left 15px.

[FREEZX]

i believe the shift is half of the scrollbar's width. therefore 7.5px. it's easily noticed though, when navigating from a page without a scrollbar.

[teedoff]

Yes I encountered this small but annoying problem with a project I did for my senior college Cold Fusion class..lol I have seen pages WITH scroll bars that didnt need them, so there must be a way to add the scroll bar to apage whether needed or not. Not sure how to do it myself, but would love to know!

[FREEZX]

i just found a way to make all pages with a scrollbar, and so, avoiding the shift.
just add

html { min-height: 100%; margin-bottom: 1px; }

in your css and you'll make your page 1px higher than your browser can display. and you have the scrollbar.

[FREEZX]

... or

html { overflow-y: scroll}

[teedoff]

lol awesome! Nice work. I will probably add this to my pages! Thanks

[FREEZX]

no problem.