CSS background placement and div placement

[RedSon]

I've been working on a project for a customer part time. It's located here: http://lp-com.appspot.com/

I copied this template from the web from one of those free sites but I don't know enough about CSS to save my life! So I need help. You can see on the main page that right below the nav div is my navigation list then a clear div followed by the green and grey boxes.

On the main page the background image is just where I want it. Right below the nav links, pretty much dead center of the screen. But if you look at the about or contact us page you can see how the background image is being pushed down farther because of the length of the green box, which messes up the formatting.

What I would like to see is the background image stay put like it is on the main screen but the green and grey boxes just extend beyond the bottom edge of the background. This would therefore push the W3C checkers and the adverts down farther.

How do I do that in CSS?

[drhowarddrfine]

Does adding to #gbox 'position:absolute' solve the problem?

[RedSon]

It does, but then it covers up everything else that is down below. The validation checker links and the adverts are obstructed by the gbox.

[zorgi]

Can you wrap #gbox into absolute layer and put validation checker and adverts to the bottom of that new absolute layer (within it).

[RedSon]

They are in div outer. I think if I put them in my gbox div they would be inside of the background image if the gbox was small. I want the validatio checker and adverts at the very bottom of everything.

Also, gbox is only 431px wide and my banner ad is longer than that.

[zorgi]

Sorry i corrected slightly my original post. before you answered I think.

[RedSon]

I'm not sure how to do that. I need gbox to be absolute, but I also need it to push things downward as it grows. I can't update div outer because then everything will be absolute. I might be able to create a new footer div or something, but I wouldnt know what to put in it. If it needed to be absolute or not.

[zorgi]

Here is some simple inline css just to illustrate what I meant. Red border represents new absolute layer. If you change height of layer that says "YOUR GREEN BOX" you will see what I ment.

<div style="width: 800px; height: 450px; background-color: #033;">
    <div style="width: 500px; position: absolute; left: 50px; top: 50px; background-color:#333; border: solid 1px red;">
        <div style="width: 150px; height: 300px; background-color: #090;  float: left">
            YOUR GREEN BOX
        </div>
 
        <div style="width: 350px; height: 500px; float: left; color: #FFF">
            OTHER BOXES AND CONTENT
        </div>
        <div style="clear: both"></div>
        <div style="width: 500px; height: 50px; background-color: #630; color: #FFF">FOOTER</div>
    </div>
</div>
 

[RedSon]

I see what you mean but how do I translate what you have shown me into my CSS on the site?

From your example it looks like I need to create a footer div that lives inside my outer div.

[zorgi]

@RedSon
Yep. Footer and content would have to live within same absolute layer.

[RedSon]

If I make div outer absolute it moves it to the left hand side and ruins the layout.

Will it work if I just add a footer div or does it have to be in the absolute div area?

[RedSon]

Actually I'm going to go with an overflow:auto.

But thanks for the help!