Help centring a layout correctly

Usually I constrain content within a page width of 980px or so.

But I'm just trying out a layout that has a gradient effect in the header that I would like to have a total width of 1200px so that the gradient effect kind of extends beyond everything else.

You can see what I mean here:

http://www.traveltradeonly.com/index_new_101.php

It all looks OK so long as the browser window is at least 1200px, but if its reduced beyond that, then it doesn't centre. Which presumably it should ideally do down to 980px which is the width of content constrained by the red and yellow borders.

The CSS looks like this:

body {
background-position:top;
background-image:url(../images/body_background.gif);
background-repeat:repeat-x;
background-color: #2C455F;
color: #2c2c2e;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 14px;
margin: 0 auto;
padding: 0 0 0 0;
text-align: center;
}
#header {
margin: 0 auto 0 auto;
padding: 0px 0px 0px 0px;
width:1200px;
height:150px;
text-align:centre;
border-left:1px solid #999;
border-right:1px solid #999;
background-image:url(../images/header_background.png);
background-repeat:no-repeat;
}
#header #navigation {
margin: 0 auto 0 auto;
height: 28px;
padding: 122px 0px 0px 0px;
border-top:0px solid #FFF;
border-bottom:0px solid #FFF;
width:980px;
border:1px solid #900;
text-align:center;
}
#contentWrapper {
margin: 30px auto 0 auto;
clear:both;
text-align: left;
width: 1200px;
color:#FFF;
border-left:1px solid #4C5C66;
border-right:1px solid #4C5C66;
}
#contentWrapper #rightColumn {
margin: 0px 110px 0px 0px;
padding: 15px 15px 15px 15px;
border-right: solid 0px #FFF;
float: right;
width: 270px;
border:1px solid #990;
background-color:#182633;
}
#contentWrapper #content {
margin: 0px 420px 0px 110px;
padding: 15px 15px 15px 15px;
font-size:13px;
line-height:16px;
color:#FFF;
border:1px solid #990;
background-color:#182633;
}

Any suggestions for improving that CSS to produce the desire effect much appreciated.

Thanks.

the width of the header is set to 1200px. the content will center based on the widest element in the page.

because the width of the header is set to be wider then the content, the center point for the content is set to the center of the header.

That was the layout that at least showed my intent. If I constrain all the content within 980px, and use that 1200px gradient image for the body background, that solves one issue, but creates another - ie the dark blue doesn't extend across the full window when its larger than 1200px, because I no longer have the repeating background for the body.

Should it be possible to have it as it is in this page, but with the dark blue strip extending the full width of the window?

http://www.traveltradeonly.com/index_new_103.php

CSS is:

body {
background-position:top;
background-image:url(../images/header_background.png);
background-repeat:no-repeat;
background-color: #2C455F;
color: #2c2c2e;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 14px;
margin: 0 auto;
padding: 0 0 0 0;
text-align: center;
}
#header {
margin: 0 auto 0 auto;
padding: 0px 0px 0px 0px;
width:980px;
height:150px;
text-align:centre;
border-left:1px solid #999;
border-right:1px solid #999;

}
#header #navigation {
margin: 0 auto 0 auto;
height: 28px;
padding: 0px 0px 0px 0px;
border-top:0px solid #FFF;
border-bottom:0px solid #FFF;
width:980px;
border:1px solid #900;
text-align:center;
}
#contentWrapper {
margin: 30px auto 0 auto;
clear:both;
text-align: left;
width: 980px;
color:#FFF;
border-left:1px solid #4C5C66;
border-right:1px solid #4C5C66;
}
#contentWrapper #rightColumn {
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
border-right: solid 0px #FFF;
float: right;
width: 270px;
border:1px solid #990;
background-color:#182633;

}


#contentWrapper #content {
margin: 0px 310px 0px 0px;
padding: 15px 15px 15px 15px;
font-size:13px;
line-height:16px;
color:#FFF;
border:1px solid #990;
background-color:#182633;
}

change:
body {
background-position:top;
background-image:url(../images/header_background.png);
background-repeat:no-repeat;

to:
body {
background-position:top;
background-image:url(../images/header_background.png);
background-repeat:repeat-x;

Problem with that one is that the gradient effect gets repeated, which I'm trying to avoid. Its definitely one of those things that shouldn't be as complicated as it seems to be!

http://www.traveltradeonly.com/index_new_103.php

you should d o the gradient with css instead of in the image:
http://css-tricks.com/examples/CSS3Gradient/

Thanks Jason, I'll have a look.

Will that run into the same issue though, depending on whether the CSS gradient is applied to the body or to a DIV?

no if the cradient is applied through css rather than the image, it wont have to repeat

I ended up finding a solution that worked with the image in the end, using min-height.

http://www.traveltradeonly.com/index_new_104.php

I'll still try and recreate it using CSS gradients though, as that will probably be a good exercise.

Hi Iain, if you end up creating a gradient via CSS3 and only if you need the website to display correctly with [gulp] any IE below version 9....then CSSPIE is pretty good to get such nice CSS things to play nicely :)

Also have you tried experimenting with the below in your CSS?

background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;

Chris