Originally Posted by sunfighter
OK. That's a different thing then what we started with.
I apologise for that, the template I'm using probably isn't the right one for what I'm trying to achieve and I've made things more complicated than they need to be.
I made your changes (and I've changed most of my div background colours to what they eventually will be) and also had a go at changing a few things myself to see what happened and I've got some questions.
I've got a thin black border across the top of the #content-2-1 div, now that the background image is in the #content-2 div the border doesn't quite reach either side to the correct point on each edge shadow. Is there a way to specify a pixel length for a border? If there is I was thinking I could center justify a border across the top of the #content-2 div and it would line up with the background image correctly on each side.
I moved the background image into the #content-2-1 div, increased its width to 960 pixels and I seemed to lose the right side of the image off the edge of the div. I then tried to float the #content-2-1 div to the left in the #content-2 div and the right side of the image lined up but I still couldn't see the right side.
I removed the float and then had a go at decreasing the left and right margins to 0 pixels. My thinking was that the background image would sit squarely in the div and I wouldn't have to worry about the margins (I was assuming you put a 10 pixel margin in so that the text/content wouldn't sit over the edge shadows?). I'm not sure how I was then going to stop the text from sitting over the edge shadows, I hadn't thought it that far through yet.
Anyway, none of what I played around with worked so I've gone back to your changes.
I'm also trying to move the nav div up a little closer to the header div and also away from the top edge of the #content-2 div. I've changed the padding values for both divs but as it is at the moment the nav div is overlappingthe #content-2 div. I'd have thought that as the browser renders the page it would place each div on top of each other, div a on top and then div b below edge to edge as they run down the page, why would they overlap?
Thanks again for your time, I'm learning as I go.