---
layout: post
title: The 960px grid on top of full-range background
tags: [ design ]
published: true
---

I have been putting myself to test on a client project, regarding aesthetics. I
have used "The Grid" in other situations but not in this way. I have learned
how to accomplish grid balance on top of full-range background... again, the
hard way. I use this approach in this very blog so you should realize its
result already.

This accomplishment has been unveiled to me through three of my favorite
websites out there: [SimpleBits](http://simplebits.com),
[Viget](http://viget.com) and [OnWired](http://onwired.com). I know a lot of
other websites that use this but these really caught my special attention. If
you see three homepages, all of them use full-range backgrounds and yet they
use the the 960px grid. I wanted that richness in my projects and so I gave it
a try. Before I deepen into the procedure, i must say it's always good to have
a container/bucket div instead of acting directly over the body element for
cross-browser compatibility. I have tried it and IE 6 didn't like it very much.

We are admitting a simple _skeleton_ here: a simple header, a navigation
bar, a main body and a footer should do the trick. So here's my procedure:

Step 1
------

Create the container div around.

{% highlight html %}
<div id='container'>
→ Skeleton goes here.
</div>
{% endhighlight %}

This is helpful as I mentioned in order to set its width to 960px right there.

{% highlight css %}
#container { width: 960px; margin: X auto; }
{% endhighlight %}

This is a very basic approach and it's a good one if you want to implement a
30px padded box like [Paul Boag](http://boagworld.com) for example. That way
you save further implementation and get a clean shot at the grid. However, if
you plan to use full-range backgrounds like I did then you'll have a little
more work.

Step 2
------

Don't set any width for the skeleton div's so they default to 100%. Now you're
ready to set each one a background (perhaps you'll have a repeat-x option or an
attached one merging to the background color). Now each div gets it's own
background, which is what we want. For the header, it would be something like:

{% highlight css %}
#header { background: #xyz url('path/to/background.png') repeat-x; }
{% endhighlight %}

Step 3
------

Place a single div child inside each skeleton div. All of the content should go
inside these child div's. Then, you can set each div child the 960px width like
this: `#container > div > div { width: 960px; margin: 0 auto; }` This tells us
the div's inside the skeleton div's get affected. That's why I'm saying every
piece of content should go inside the child div's, while the background goes
outside. And you ask why not setting the default width to the skeleton div's
itself? Well, you can do that but let me show me the differences.

<a href="http://josemota.net/sites/default/files/images/1.jpg"><img
class="frame frame-unfloated"
src="http://josemota.net/sites/default/files/images/1_.png" alt="Without the
child div's it would look like this..." /></a>

Again, this is a very simple example. You can try lots of other stuff like
positioning only some of the div's, background different settings, anything. I
hope you learned something from this example.