Hi all,

 

I am creating a wordpress theme and when there are posts on the page that makes the page have a scroll bar. the main div moves to the left like below:

 

 

How would i fix this?

 

Thanks

Will probably need to see the code, mate.

The div in the page with the vertical scrollbar is probably centering in the remaining space using margin: auto as the scrollbar is using about 18px, while the normal page is centering in a wider window with no scrollbar.

 

There are various methods to create a dummy scrollbar on pages that don't have much content so that all pages look the same. This is one method, add this at the top of your stylesheet:-

html { overflow-y: scroll; }

what code do you wana see? the css?

 

HTML:

 

<!-- Main -->
<div id="main">
 <!-- content of main -->
 <div class="content">
 </div>
</div>

 

CSS

 

/* -- MAIN -- */

#main{}
#main .content{
	background: #FFF url(images/main_bg.png)  no-repeat 50% top;
	margin:0 auto; padding:30px;
	width:900px;
	position:relative;
}

 

Let me know if you need more code

The div in the page with the vertical scrollbar is probably centering in the remaining space using margin: auto as the scrollbar is using about 18px, while the normal page is centering in a wider window with no scrollbar.

 

There are various methods to create a dummy scrollbar on pages that don't have much content so that all pages look the same. This is one method, add this at the top of your stylesheet:-

html { overflow-y: scroll; }

 

Thanks dude, is there a way i can sort it out without the scroll bar? +1

Usuallly what I do is make sure that the page always has a scrollbar, by making the page a certain length. But really, its not much of a problem. I've lost many hours before trying to figure out why the whole site was moving before

I wouldn't make the page a minimum "certain length", blank space makes the page looks unfinished. You also wont be able to cater for all screen resolutions. Eg. Someone with a 1280x1024 res may see the bar, but someone with 2560x1440 will encounter the original problem. I don't think you should be too fussed.

There are various method to create a dummy scrollbar on pages that don't have much substance so that all pages look the same. This is one routine, add this at the top of your stylesheet:-

The div in the page with the erect scrollbar is probably focusing in the remaining space using margin: auto as the scrollbar is using approximately 18px, while the pattern page is centering in a wider window with no scrollbar.