Help with new design


I have been experimenting with a new design, and I am having some issues. I have designed a menu with an image on the left and one the right that don’t stretch (I have put them as their own div background image). Then I have a separate gray image behind them that spans the entire width of the page. The problem that I am having is keeping the contents centered on the page. Right now I just padding on the right to push that div tag over, but it will not adjust to the different monitor sizes. Any ideas?

What is the actual width of the site suppose to be? I really don’t see the reason for that body-wrapper. I think you make it way to complicated. I see that the background image for the content has a width of 800px. So your wrapper should be 800px. You also use margins everywhere to get things aligned. See if this works for you:

html, body {
	height: 100%; margin: 0; padding: 0;	

body {
	background: #e3d8d8 url(images/yourImage.png); font: Arial, Helvetica, sans-serif 100.01%; color: #830606;	

#wrapper {
	width: 800px; margin: 0 auto; font-size: 0.7em; 	

#header {
	width: 800px; 	

#header .logo {
	width: 192px; height: 96px; margin: 2px 0 2px 150px;	

#header-left {
	width: 210px; height: 400px; background: url(../images/menu-left.png) no-repeat; position: absolute; left: 0;	

#header-right {
	width: 210px; height: 400px; background: url(../images/menu-right.png) no-repeat; position: absolute; right: 0; top: 0;	

<div id="wrapper">
<div id="header-left"></div>
<div id="header">
<div class="logo"></div>
<div id="header-right"></div>

By the way in FF your trick with with those three background images is working, but not in IE :slight_smile:

What is suppose to be the width of your site? First of all do you have a wrapper without width where you use, as it should be

margin: 0 auto;

but then within the wrapper you have a div body-wrapper with


There is no reference or what so ever to keep your content centered

Ok… sorry for the confusion. I have figured out how to apply all three images in the background of my body with this:

body {
	background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
	background-position: top left, top right, top center;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-color: #e3d8d8;
	font: 12px arial, sans-serif;
	color: #830606;

I have set my site width to 1000px and adjusted my contents with a padding left of 215px, but I am still not seeing my contents staying centered on my page.

#wrapper {
    margin:0 auto;
#body-wrapper {

Can someone take a look and give me some advice?

I had a site width in before, but I was having issues with my side images.

This is what I have done now:

I put the div “left” and “right” outside of the div “wrapper”, and I changed the site width inside the “wrapper” div to 800px. I consequently had to remove my padding left on my “body-wrapper” div tag. What am I missing?

never mind… my mistake. That’s what I get for having fat fingers. :slight_smile:

Thanks a bunch for your help.

I made the modifications above, but I am still seeing everything pushed to the left and the left image is not appearing. Any ideas?