How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

Not sure that the title is really describing what I am trying to do. Actually, this is quite simple and widespread usage over the internet :

I want in the background some liquid/full width of stripes (with the same height of some div of the design) while my content is using a Blueprint fixed-grid.

For instance, this website : intient.com is doing exactly what I am looking for. A background stripe in black (and another one in grey) that is liquid width and the content using a grid (but not Blueprint after having a look at the CSS)

I am using a Blueprint fixed-width grid (950px) for displaying any content. Do you know how I can do that? With Blueprint? And without a static background image...

Thanks

Answers


In Blueprint, you do this:

<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 style .stripeContainer:

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

Need Your Help

How to apply a CSS property using JavaScript?

javascript jquery html css

I have the following structure of the code. If the height of UL exceeds 270&nbsp;pixels, then I want to add the CSS property overflow-y:scroll; or else as it is.

Timer\Counter in C for rate calculation?

c timer counter average rate

Need a running (moving, rolling) average algorithm to calculate the 5-minute average bits that are passed in. All I have to work with is an accumulative value for the bits that are passed in.