tags:

views:

2078

answers:

3
Q: 

960 gs, full width backgrounds

I'm trying to implement a design I created in photoshop. I want to use the 16 column 960 GS, but the problem is that I only want the content bound by the 960 width.

I have backgrounds for 4 seperate areas. Header, the content area, a top footer that is links, and the bottom footer with the copyright in it.

The top half of the page works fine. The backgrounds show, the text is in the right place. The problem comes with the footer. If the data in the content area expands beyond the minimum height for the content area, the links in the top footer are pushed down, but the backgrounds remain stationary. I suspect this is because the content is all floating and doesn't push the background divs when the content expands.

How do I have a background that is full width while using 960 gs and make it so the footer slides down when the content expands?

Here's the basic wrapper for my site. I realize this may not work for what I want to do.

<body>
  <div id="header">
    <div class="container_16">

    </div>
  </div>
  <div id="content">
    <div class="container_16">

    </div>
  </div>
  <div id="footer-top">
    <div class="container_16">

    </div>
  </div>
  <div id="copyright-footer">
    <div class="container_16">

    </div>
  </div>
</body>

the 960 GS css is here: http://www.spry-soft.com/grids/grid.css?column%5Fwidth=40&amp;column%5Famount=16&amp;gutter%5Fwidth=20

My CSS - I've ommited the elements that have to do with specific content, as this is just about getting the layout right:

html, body
{
    height: 100%;
}

body
{
    color: #f7f3e7;
    margin:0; 
    padding:0;
    background-color: #f7f3e7;
    line-height: 1.2em;
    font-size: 0.8em;
    font-family: Verdana, Arial, Sans-Serif;
}

#header
{ 
    height: 100px; 
    margin:0; 
    padding:0; 
    background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x; 
}

#content
{
    min-height: 550px;
    /*min-height: 546px;*/
    margin:0; 
    padding:0; 
    background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}

#top-footer
{
    font-size: .8em;
    min-height: 188px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}

header, content, footer-top, and copyright-footer all have the background set and height or minimumheight.

Really what I want is the header set at 100px tall. The copyright footer is a set 42px tall. The top footer is set at 200 px tall. I want the bottom of the copyright footer to always rest on the bottom of the page if the content area is short enough that the footer wouldn't touch the bottom of the page. If the content area expands, I want the footer to slide down. I want the backgrounds for all sections to be 100% - that is, however wide the browser is, but I want my content bound by the 960 grid system.

Any suggestions?

EDIT: added the CSS as requested

+2  A: 

I would create a div called 'content' that would contain the other divs and make the other divs' position relative. The 'content' div would have the appropriate width for what you want to do. Also, for each column you can use the 'float' css property.

Partial  2009-12-22 17:52:23
I had something like that to start with, but it didn't help.
Josh  2009-12-22 17:58:20
+1  A: 

Just wrap the container classes with <div> tags and style those. Remember to add .clear divs after every "row" in the containers (even if you have only one "row"), or it will not work properly.

<div id="container">
  <div class="container_16">
    <div class="grid_16"><h1>Hello, World!</h1></div>
    <div class="clear"></div> <!-- Important! -->
  </div>
</div>
Veeti  2009-12-22 18:55:01
A: 

I figured it out. I needed to make my footer float.

The Markup:

<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0">
    <div id="page-wrapper">
    <div id="header" class="container_full">
        <div class="container_16">
        <div id="logo" class="grid_4 alpha"><a href="/"><img src="content/images/logo-beta.png" /></a></div>

        <div class="grid_10 push_0">
        <ul id="navigation" class="clearfix-header">
            <li><a class="header-link" href="#">About</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li>
                </span>
            </li>
            <li><a class="header-link" href="#">Account</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a>
                </span>
            </li>
        </ul>
        </div>

        </div>
    </div>

    <div id="content" class="container_full">
        <div class="container_16">

            <div id="page-content" class="grid_16">Page Content</div>

        </div>
    </div>

    <div id="footer">
    <div id="top-footer">
        <div class="container_16">
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_7">
                Big content area
            </div>
            <div class="grid_3">
                <h4>Boring Stuff</h4>
                <ul>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Legal Mumbo-jumbo</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="copyright-footer">
        <div class="container_16">
            <div class="grid_16">
                Copyright statement
            </div>
        </div>
    </div>
    </div>
    </div>
</body>

The CSS:

#footer
{
    width:100%;
    float: left;
    height: 232px;
    position: relative;
    clear:both;
}

#top-footer
{
    width:100%;
    font-size: .8em;
    height: 200px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    width:100%;
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}
Josh  2009-12-23 18:08:53

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?