Hey Ya'll

I'm trying to get my wrapper to center, and my background to center as well. The wrapper should be 800 px, but right now, for some reason, it's 815, and isn't aligned with my background. (thus the lack of a drop shadow on the right)

I'm referring to: http://www.ivancash.com

Thanks for your help.
-Ivan

the white panel isn't dead on in the middle of the background image. The right side has 30px more of grey than the left. So if you move the white panel 15px to the right on the background image then that should sort it.

Originally Posted by vkw91

the white panel isn't dead on in the middle of the background image. The right side has 30px more of grey than the left. So if you move the white panel 15px to the right on the background image then that should sort it.

...right, but that doesn't make any sense. I don't neccessarily want a temporary fix. I want to know the logic behind this problem, so I can fix the root problem, rather than working around it.

The best way to set div values is with percentages. One advantage of this is that you can set the width of the body to 100%, the width of the wrapper to 80%, and give the wrapper a left-margin of 10%, therefore ensuring that it is always centered

Originally Posted by Angelosanto

The best way to set div values is with percentages. One advantage of this is that you can set the width of the body to 100%, the width of the wrapper to 80%, and give the wrapper a left-margin of 10%, therefore ensuring that it is always centered

...but i want the wrapper to be a fixed 800 px. If i set it as a percentage, it won't stay an a fixed 800 px... you follow?

I just tried adjusting the backgrouind image, and it only made things worse... i'm so confused. Help! Please!

Ivan I wrote a post on centering in css so I hope you don't mind my pointing you there for the full answer.

The basic idea is to set the width on your wrapper and then center it using margins in css

div#wrapper {width:760px; margin: 0 auto}

I'm using the shortcut to set all 4 margins. 0 top and bottom and auto for the left and right. I know you want to use 800px, but you should make the width a little less than 800px since you need to account for the width of browser window and the scrollbar. 800px will actually be a little too wide for 800x600 resolution.

I generally use 760px when designing for 800px width, but you should be able to safely use 780px. I wouldn't go over 780px.

is this what you were trying to do:

http://www.vkw91.co.uk/ivancash/ivancash.htm

Since you have your image just stuck on the page, inside the #wrapper, I would suggest adding another div that is 800px wide to hold your image(s) and set it for margin: 0 auto; as you have the #wrapper. If you use images that are not full width then you can align them to the center inside the new and it gives you the ability to target JUST those images inside it.

For example, say you use #imgHolder for your div. You could then specify #imgHolder img {rules here....} to position the photos.

thanks everyone for your help!!!