How to display a 100% width strip in a CSS design using a fixed mesh drawing?

Question

Not sure if the name really describes what I'm trying to do. In fact, this is a fairly simple and widespread use over the Internet:

I want in the background a bit of fluid / full bandwidth (with the same height of some design div), while my content uses a fixed Blueprint grid.

For example, this website: intient.com does exactly what I am looking for. A background bar of black (and another in gray) that represents the width of the liquid and the contents using a grid (but not Blueprint after viewing CSS)

I use a Blueprint fixed width grid (950px) to display any content. Do you know how I can do this? With Blueprint? And without a static background image ...

thanks

Answer 1

In Blueprint, you do the following:

<div class="stripeContainer">
   <div class="container">
     <div class="span-8">Column 1</div>
     <div class="span-8">Column 2</div>
     <div class="span-8 last">Column 3</div>
   </div>
</div>
<div class="container">
  <div class="span-12">Body goes here</div>
  <div class="span-12 last">Some sort of menu perhaps</div>
</div>

Then you will create a style .stripeContainer:

.stripeContainer
{
    width: 100%; /* this is usually implied */
    background-color: pink;
}