tags:

views:

25

answers:

2

I am trying to use the 960 grid system with header and footer graphics at the top and bottom of the page. These graphics need to go wider than the 960 grid. The header works fine - a DIV, position absolute, width 100%, and centered, does the job perfectly.

But now I want the same thing, but at the bottom of the page. I.e. aligned with the bottom of the footer section. I figured I would attach the background image to the bottom of the .container_16 div, positioned on the bottom. This way, the footer image would always stay with the bottom of the content.

Here is my attempt so far: http://www.northtreestudios.com/sandbox

The red line is the border of the body tag, and the blue line the border of the .container_16 div. I put a clearing div (<div class="clear"></div>) everywhere I could think of, but I nothing I do will get either the .container_16 div or the body tag to expand to include the footer!

I have been scouring the web for hours, and I am running out of ideas ...

A: 

If this is what you want, then just do this:

#container {
    border:2px solid blue;
    top:0;
    width:960px;
}

Or if you want that navigation to be right at the top do this:

#container {
    border:2px solid blue;
    top:0;
    width:960px;
    margin-top:-250px;
}
GaVrA
I'm confused - the container id already has all those attributes. Is one of the other attributes throwing it off?
Dave W.
@Dave W. Yes, your #container have those styles and much much more. Just remove everything and put these in my answer.
GaVrA
Well, that seemed to do it, thanks! But I'm not sure I understand why. Was it because my .container_16 div was absolutely positioned, therefore removed from the normal document flow, and therefore it doesn't register it's full height when I try the clearfix? I would like to understand why the normal float clearing didn't work. Thanks again for the help!
Dave W.
Yap, position:absolute was cousing all the problems. Dont think you can do a thing with that kind of elements, so be carefull and use them only in most extreme cases. Pretty much any design can be done without using position:absolute. ;)
GaVrA
A: 

Hi Dave,

That might have resolved it but it involved modifying the 960GS framework. If you post your original HTML code I'm happy to investigate why this was happening.

Adam Beizsley-Pycroft
The original code is still at the link from my original post:http://www.northtreestudios.com/sandbox
Dave W.