Multiple CSS sheets - Container div background is not on top?

Question

I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page Pretty page!

Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -

/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}

I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page. This is how the page looks now w/missing bgcontainer.gif: Current page

Please help - thank you

Answer 1

With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:

But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.

The "#container" div of the "wrong" page spans the whole witdh.

By the way, I like your design.

EDIT: This is the look of the page with float: left; and left:107px; added to the ".container" div.