Pure CSS solution blocks flowing out of grid - html

Question

I've made an illustration of the situation:
The blue lines illustrate the grid the website is in. Let's assume a 960 grid for now, with a 300px left side (red part), a 20px gap and the remaining 640px for the right side (the black and green parts). I want to know if there's a solution for this problem that doesn't use calc() (due to older browsers) or background-image (because that's not really pretty).
Is there a pretty way to make this work, using just CSS while keeping the content centered within the grid, and the backgrounds flowing all the way to the borders of the screen?

Answer 1

http://codepen.io/anon/pen/avoKwQ
Done by pseudo elements and absolute positioning. Used bootstrap for faster demo. Actually, it is a specific problem and my solution may not fit your project. Especially not work when you require horizontal scrolling. But problem is solved.
&:after {
content: " ";
position: absolute;
top: 0; right: 6px;
width: 99999%;
height: 100%;
background: red;
z-index: -1;
}
Parent of this element ofcourse require position: relative. In example this is done by bootstrap.

Answer 2

Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This one has the added benefit of the columns always being equal height:
* { margin:0; padding:0; box-sizing: border-box; }
.grid {
display: flex;
}
.col-3 {
flex: 1 1 320px;
border-right: 20px solid #fff;
}
.col-2-3 {
flex: 1 1 640px;
}
.col-3 {
display: flex;
justify-content: flex-end;
}
.col-3>div {
padding: 20px;
flex: 0 1 300px;
}
.col-2-3>div {
display: flex;
justify-content: flex-start;
}
.col-2-3>div>div {
flex: 0 1 640px;
padding: 20px;
}
.red { background: #f00; color: #fff; }
.green { background: #0f0;}
.black { background: #000; color: #fff;}
<div class="grid">
<div class="col-3 red">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- col -->
<div class="col-2-3 green">
<div class="black">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .black -->
<div class="green">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .green -->
</div><!-- .col -->
</div><!-- .grid -->