full width background color on a div - html

Question

I'm using a 1120px css responsive framework responsive or it can act as a fixed grid whenever I need it.
I have a div inside the 1120px container div on which I want to apply a full width background color.
The background color of the div's is of course only inside the container div and I want to make it fill the full width of the body element.
Now the problem is that the div is generated automatically by a shortcode so I can not create an outer div and set it to 100% width.
Here is the markup from the shortcode:
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>
</div>
</div>
and this css :
.toggle{ margin-bottom: 5px;
clear: both; float: left;
position: relative;
width: 100%;
}
.toggle .toggle_title {
position: relative;
font-size: 112.5%;
font-weight: 700;
padding-bottom: 15px;
padding-left: 25px;
text-decoration: none;
}
and here is a FIDDLE
Now, the problem is that this markup is under a container div which has 1120px width.
I was thinking to add on .toggle .toggle_title position:absolute; and set a min- width of 1480px for example but then everything will break.
I'm sure that is a better approach to this kind of issue.
Can anyone give me some tips on how to make this work?
Thank you!

Answer 1

Here's a really ugly way to do this. and I'm posting this with an expectation of someone downvoting this... but it works.
Here's a fiddle for it http://jsfiddle.net/5mn22/8/
Add this to your CSS:
.toggle_title, .toggle_content {
position:relative;
z-index:2;
}
.toggle:before {
content:"";
width:4000px;
position:absolute;
height:100%;
background-color:red;
left:-50%;
z-index:1
}
Basically, just adding a null content before the div with a width double the size of expected screen resolution and position it to the left 50% to make sure it stretches the entire distance.
What do you think?

Answer 2

Try out thinking different changing css parameter instead of using background-color. I have tested it with :box-shadow parametr:
.toggle {
box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}
Take a look at live example (blue row)^http://kreditka.testovi-site.pw
Regards,
Max