Avoid container div

Say you have a website and have a fancy pink header which stretches all across your screen horizontal. Inside the header there some text which needs to be centered and have a 960px fixed width area.

---------------------------
|   x   |  hello   |   x   |
|                          |
|   y   |  hi      |   y   |
---------------------------

x = pink background row y = yellow background row

Does someone has an up to date css (no js) solution to dismiss the need of a container div just often for padding?

html:

<header>
    <div>
        hello
   </div>
</header>
<footer>
    <di开发者_如何转开发v>
        hi
   </div>
</footer>

css:

header {
  background: pink;
}
header > div {
  width: 960px;
  margin:0 auto;
}

Does someone has a solution, maybe something with pseudo before and after? So you can just write beautiful html:

<header>hello</header>
<footer>hi</footer>

and fix it all in css.

This is a basic example, the point is; I am often bound to use a div just for layout things, mostly padding. Of course I can set seperate background to do the trick, but I am talking about keeping this all together, since, the probably has the same issue and another background. And same with the main content, and so on.

Wish there was something like:

header{
  background: pink;
  padding: 100%-960px;
}

That would 'do the trick' and scales after resizing the viewport.

Typically I would just use multiple container divs, with a container class... Like hellow and hi would both be in a div with "wrapper class", and x and y would both be 100% width wrapper-of-wrapper divs.

But since your goal is to avoid wrapper divs... then I won't go into detail about how you can accomplish this with 4 wrapper divs :)

I think you should look into these links:

• http://sass-lang.com/
• http://twitter.github.com/bootstrap/#less