0

I am using the 960 GS for layout of my webpage, so everything is centred in a 960 px width. However I have a row in the grid that I want the background colour to expand over the entire width of the page and not just the 960 px width of the grid.

Think the footer at Envato (although I don't need it to stick on scrolling).

Any ideas? Would much appreciate it.

Ollie
  • 196
  • 16

3 Answers3

1

I use the 960 grid quite a bit and have also come across this scenario. What I generally tend to do is break out from the main container (container_12 for example) and add a wrapper around it to achieve the full width background. Take the following example:

<div id="header">
    <div class="container_12">...</div>
</div>
<div id="content">
    <div class="container_12">...</div>
</div>
<div id="footer">
    <div class="container_12">...</div>
</div>

Then I can simply apply the full width background to #header and container_12 will remain fixed width and centered.

Mel Lota
  • 75
  • 7
0

I didn't get what you mean exactly because your background depends on the users display resolution, but generally if you set the width and margine of html to auto it will scratch all over your page wether user maximize or put in any resolution, for scrolling you can also reach what you looking for. hope it will help you.

Behnam
  • 29
  • 1
  • 7
  • Not quite what I want, I've got a div inside another div which has a fixed width but I want this nested div to have a background that spans to the both edges of the page. I know its possible, just can't remember how to do it. – Ollie Oct 20 '11 at 12:24
0

I don't use 960GS, but perhaps this is what you need:

http://gandrweb.com/blog/comments/960-grid-system-full-width-backgrounds

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • That would be just what I need, however this div with the full page background needs to be inside the 960 container, rather than putting it outside. – Ollie Oct 20 '11 at 12:28