Full Width Background Color On A Div

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

Solution 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?

Solution 2:

Try out thinking different changing css parameter instead of using background-color. I have tested it with :box-shadow parametr:

.toggle {
      box-shadow: -10vw0px0px0px#0e1d42, -28vw0px0px0px#0e1d42, -42vw0px0px0px#0e1d42, -30vw0px0px0px#0e1d42, -46vw0px0px0px#0e1d42, -15vw0px0px0px#0e1d42;
      -webkit-box-shadow: -10vw0px0px0px#0e1d42, -28vw0px0px0px#0e1d42, -42vw0px0px0px#0e1d42, -30vw0px0px0px#0e1d42, -46vw0px0px0px#0e1d42, -15vw0px0px0px#0e1d42;
      -moz-box-shadow: -10vw0px0px0px#0e1d42, -28vw0px0px0px#0e1d42, -42vw0px0px0px#0e1d42, -30vw0px0px0px#0e1d42, -46vw0px0px0px#0e1d42, -15vw0px0px0px#0e1d42;
}

Take a look at live example (blue row)^http://kreditka.testovi-site.pw

Regards, Max