Question

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.

Answer 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.