Page Scroll Shifts Div 1px?

**alexjewell** · 06-10-2010, 04:01 AM

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

Code:

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.

Code:

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';
	}
}

Thread: Page Scroll Shifts Div 1px?

Thread Tools

Search Thread

Page Scroll Shifts Div 1px?

Bookmarks

Bookmarks

Posting Permissions