Centered DIV (exactly 900px), with divs (with opacity) on each side filling up the rest of the page

Question

I have a centered DIV, which is exactly (never more or less) 900px. I want it to always be centered and have the two filler divs to fill up the rest of the page on each side...

giving the content under (using z-index) a highlighted type effect...(that's the use of the filler divs...to show there is other content on each side of "SPOTLIGHT" content, but it's not under the "SPOTLIGHT".

THIS CODE BELOW DOESN'T WORK...BUT IT GIVES YOU A FEELING OF WHAT I'M ATTEMPTING TO DO

CSS:

/* DIV I WANT TO BE CENTERED, SURROUNDED BY 50% OPACITY DIVS FILLING REST OF PAGE */
.shadercentered {
width:950px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:green;
height:73px;
float:left;
top:-28px
}

/* DIVS THAT FILL THE REST OF THE PAGE ON EACH SIDE OF 900px CENTERED DIV */
.shaderblindsleft {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:left;
position:relative;
top:-28px;
}
.shaderblindsright {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:right;
position:relative;
top:-44px;
}

HTML:

<div class="shaderdiv">
    <div class="shaderblindsleft">&nbsp;</div>
    <div class="shadercenter">&nbsp;</div>
    <div class="shaderblindsleft">&nbsp;</div>
</div>

Answer 1

You get it with controlling what happens in shaderdiv with getting its children out of the flow, with position absolute.

You put shadercenter in the middle with hooking it at left: 50%, then offseting it to the left with a negative margin-left of half its size.

For the surrounding, you use the capabilities of constraints to define the width. For the left one, you hook it to left:0 (because it's the left one), and then you define its right side to be where shadercenter is hooked... so it would be right: 50%. Then, you add a margin-right of half the size of shadercenter so it will be constrainted to be smaller. Use the same technic "reversed" for the right one

<div class="shaderdiv">
    <div class="shaderblinds left">&nbsp;</div>
    <div class="shadercenter">&nbsp;</div>
    <div class="shaderblinds right">&nbsp;</div>
</div>​

.shaderdiv
{
  position: relative;
  width: 90%;
  height: 73px;
  border: 1px solid yellow; /* debug stuff */
  box-sizing: border-box; /* debug stuff */
}

.shaderdiv > div { opacity:0.5 }

.shadercenter
{
  position: absolute;
  left: 50%;
  margin-left: -125px; /* minus half size of width */
  width:250px; /* fixed width */
  height:100%;
  background:green;
}

.shaderblinds
{
  position: absolute;
  height: 100%;
}

.left
{
  left: 0;
  right:50%;
  margin-right: 125px; /* half size of width */
  background:red;
}

.right
{
  right: 0;
  left: 50%;
  margin-left: 125px; /* half size of width */
  background:blue;   
}​

Example here : http://jsfiddle.net/5kDjw/2/

You can play with the size of shaderdiv to see that it's fully liquid, shadercenter is always fixed width, always centered, with no overlapping