html - 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

Try this

.wrap {
  width: 100%;
  position: relative;
  margin: 0px auto;
}
.left {
float: right;
  width: 70%;
  height: 300px;
  background: #F4E6D7;
border: 1px solid #aaa;
}
.right {
float: left;
  width: 70%;
  height: 300px;
  background: #A2195B;
border: 1px solid #aaa;
}

.rightWrapper{
position:absolute;
width: 70%;
background: #F4E6D7;
height: 300px;
}

.leftWrapper{
   position:absolute;
width:30%;
height:300px;
right: 0px;
background: #A2195B; 
}

<div class="wrap">
<div class="rightWrapper">
    <div class="left">Left content here</div>
</div>
<div class="leftWrapper">
    <div class="right">Right content here</div>
</div>
</div>