Moderators:
Would you please move this to the CSS forum? thanks.
theconsultancygroup,
Because you want to widen the layout (and I'm assuming you want a flexible layout), you'll need to create a header image that will expand and contract accordingly. For that you will need to replace your current "#headerimage" selector definition with this one:
#headerimage {
background:#223007 url('http://theconsultancygroup.files.wordpress.com/2010/04/bamboo-19.jpg') top right no-repeat!important;
clear:both;
color:#fff;
height:200px;
width:auto;
margin:10px;
}
You'll notice that I've set the background color to a dark green. The image should fade to that green (or whatever green color you want to have) so it flows well.
To widen your layout, and change the tabs color, try this code:
#container,#navigation,#footer {
width:90%;
min-width:720px;
}
#navigation .page_item a {
background: #90330e;
color: #cac5a9;
}
#navigation .page_item a:hover {
background: #90330e;
color: #fff;
}
#content {
margin:0;
}
#content-main {
width:auto;
padding:0 200px 0 20px;
}
#sidebar {
float:right;
width:200px;
margin:0 10px 0 -210px;
}
For aesthetic purposes, I'm still leaving a margin on both sides of the layout, that's why I'm setting the overall width to a 90%; if you want the layout to cover the whole screen, then change it to 100%.
Also, as you can see, I'm setting a minimum width of 720px; otherwise, if the browser window is resized to a smaller width, the sidebar would be moved to the bottom. You don't want that to happen.
Regarding item number 3, that should be taken care of with the new width.
The whole CSS code should look something like this:
#container,#navigation,#footer {
width:90%;
min-width:720px;
}
#content {
margin:0;
}
#navigation .page_item a {
background: #90330e;
color: #cac5a9;
}
#navigation .page_item a:hover {
background: #90330e;
color: #fff;
}
#headerimage {
background:#223007 url('http://theconsultancygroup.files.wordpress.com/2010/04/bamboo-19.jpg') top right no-repeat!important;
clear:both;
color:#fff;
height:200px;
width:auto;
margin:10px;
}
#content-main {
width:auto;
padding:0 200px 0 20px;
}
#sidebar {
float:right;
width:200px;
margin:0 10px 0 -210px;
}
HTH
beaumondebrooke