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