CSS make colours go off to sides

Question

Bit of a vague title, but I wasn't sure of how best to describe it.

I've created a fiddle (https://jsfiddle.net/h87k8146/) of two divs within a wrapper.

So what I want to achieve is have all content remain within the wrapper, but with the background of .left and .right stretching out to fill the rest of the screen.

Current CSS

.wrap {
width:80%;
position:relative;
margin:0px auto;
}
.left {
float:left;
width:70%;
height:300px;
background:#F4E6D7;
}
.right {
float:right;
width:30%;
height:300px;
background:#A2195B;
}

Current HTML

<div class="wrap">
<div class="left"></div>
<div class="right"></div>

<div style="clear:both;"></div>
</div>

How would I go about doing this?

So want I want to achieve is this (rough example):

http://s2.postimg.org/bqxko5kpl/example.jpg

Answer 1

You can do this with no additional HTML by using a couple of pseudo-elements, one for each side.

.left:before {
    content:'';
    position: absolute;
    height: 100%;
    top:0;
    right: 100%;
    width: 10vw;
    background: green;
    z-index: -1
}
.right:after {
  content: '';
  position: absolute;
  height: 100%;
  top:0;
  left: 100%;
  width: 10vw;
  background: red;
  z-index: -1;
}

.wrap {
  width: 80%;
  position: relative;
  margin: 0px auto;
}
.left {
  float: left;
  width: 70%;
  height: 300px;
  background: #F4E6D7;
  position: relative;
}
.left:before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  right: 100%;
  width: 10vw;
  background: green;
  z-index: -1
}
.right {
  float: right;
  width: 30%;
  height: 300px;
  background: #A2195B;
  position: relative;
}
.right:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: 100%;
  width: 10vw;
  background: red;
  z-index: -1;
}

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div style="clear:both;"></div>
</div>

As an added feature, you can make the background colors of the pseudo-elements inherit their "parent's" background so they don't need to be reset every time.

JSfiddle Demo