1

I'm using the 960.gs style sheets for a drupal site - I would like to extend both the header, and footer sections to the edge of the webpage- resulting in something precisely like stack overflow's website.

stopshinal
  • 1,891
  • 4
  • 16
  • 24

1 Answers1

3

I believe you need to use a div with no predefined helper classes, as div's will by default expand to the full width of their parent (if theres no wrapper - it will be the full screen)

Some trivial example:

<header>
    <nav>
      <ul>
        <li> blarg </li>
      </ul>
    </nav>
</header>

<div id="main" role="main" class="container_12">
    ....
    ....
</div>

<footer>
  <p>Thanks!</p>
</footer>

Hope this helps.

GoGoGarrett
  • 613
  • 4
  • 16
  • Thanks, I think I have discovered that the 960 framework may not best be suited for my needs at this time. It's about columns, and I specifically need this to extend to the edges. I could wrestle it, I suppose, and change the bg color behind one of the 960 col's, as you have suggested. This will probably work in the intrum – stopshinal Aug 31 '11 at 18:12
  • 1
    I believe you can still achieve what you're looking for with the 960gs grid system. http://jsfiddle.net/4aRWn/ here is a working example of the header, and the footer having a background expanding the full width of the browser, and the #main container div, has a background color that only expands the container_12 div. You may need to zoom out in the JS fiddle to get the full explanation (or copy the code and use it on a real page) Anyways, I hope this helps, and hopefully you can go from here to create the page you're looking to make. – GoGoGarrett Aug 31 '11 at 20:06