Mixing Fluid and Fixed Layout - Fill Dynamic Space - html

Question

I have recently Discovered that it is incredibly difficult to mix fluid and fixed layout, So when I finally figured out a solution to a problem Ive been having for quiet a while now, i couldn't resist but to share it with the community that has helped me so much in the past.
i wanted the following look:
by dynamic space i mean it should be very much like when one applies a "margin:0 auto;" CSS rule to a containing div, the white space left and right of the element is the "Dynamic Space" in the example.
I had 6 Requirements:
had to be responsive.
the container had to have a max width of 960px and always needed to be centered.
had to work on IE8 and up.
The Dynamic space on the left had to have a different height, and contain a different color.
The Dynamic Space on the right had to be the same height has the container but a different color.
Has to work with Twitter Bootstrap.

Answer 1

At this point I struggled for 3 days, i tried everything from css table-cells to using bootstrap columns (neither worked out).
I also realized that the only way to have the div in the "same" position on huge screen sizes was to make it 50%.
So at this point i had the Following:
JSFIDDLE DEMO
which was pretty good, only problem was that the red stuck out underneath the container element.
So that My Wonderful Not At All Mathematical brain kicked in and thought:
if my containing element will always be 960px and i need my div on the left to be 50% to stay in the same position, what if i simply took 960/2 = 480px and simply applied margin:-480px.
which worked brilliantly.. until you scale your screen down to about 768px, so add a media query that changes it to margin-left:-370px;.
And it Finally Worked! Here's the Final Code:
JSFIDDLE DEMO
AND HTML:
<div class="" style="background: #000099; position: relative">
<div class="left">l</div>
<div class="container" style="background: #002500">contain</div>
</div>
AND FINALLY CSS:
.container {
max-width: 960px;
z-index: 1;
position: relative;
padding:0;
}
.left {
position: absolute;
left: 0;
width: 50%;
z-index: 1;
background: red;
height: 50px;
margin-left:-480px;
}
#media (min-width: 768px) {
.left {
margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/
}
}
#media (min-width: 992px) {
.left {
margin-left:-480px;
}
}
I Hope this Helps Someone, Sorry that its so long just wanted to explain the logic as clearly as possible.