Page Scroll Shifts Div 1px? [Archive]

alexjewell

06-10-2010, 04:01 AM

I have three divs to provide the basic layout of a website. They are below:

body{
margin: 0px;
padding: 0px;
background: #67999a url(imgs/bg.jpg) repeat-x top;}

body, #container, #inner_container{
text-align: center;}

#container, #inner_container{
margin: 0px auto;
width: 100%;
height: auto;}

#container{
background: transparent url(imgs/contbg.jpg) repeat-y center;}

#inner_container{
background: transparent url(imgs/bgtop.jpg) no-repeat top center;}

#center_container{
height: auto;
margin: 0px auto;
text-align: center;
background: transparent url(imgs/bot.jpg) no-repeat bottom center;}

#center_container, #title, #nav, #navbot, #slogan, #headbot{
width: 775px;}

The reason for the three different divs in question (container, inner_container, and center_container) is the existence of 3 separate background images. An image repeats horizontally for <body>; an image repeats vertically as a shadow in the middle for #container; and, finally, #inner_container has a background that meshes the vertical and horizontal backgrounds when they cross (the vertical shadow sheds over the horizontal stripes that run across the top).

Now, for my problem: everything lines up perfectly when there is no vertical scrolling. However, when the content overflows vertically, #inner_container shifts to the left 1px, causing the content to not line up with the vertically-running background of #container. It makes no sense to me why VERTICAL scrolling would have a HORIZONTAL effect on content! Any ideas?

alexjewell

06-10-2010, 11:39 PM

So i came up with a JavaScript that fixes the problem, I'd just prefer not to have to use it.

function offsetCC(){
var vHeight = 0;
var cc = document.getElementById("center_container");
if (document.all){
if(document.documentElement){
vHeight = document.documentElement.clientHeight;
}
else{
vHeight = document.body.clientHeight;
}
}
else{
vHeight = window.innerHeight;
}
if(document.body.offsetHeight > vHeight){
cc.style.position = 'relative';
cc.style.top = '0px';
cc.style.left = '1px';
}
}