How to achieve a left and right background split leaving middle div visible?

Tags: css

Problem :

I have a header-Container div which stretches 100% of the width of the browser, just like on StackOverflow. Within this div is the actual header with a fixed width which is centered on the page.

What I want is to have a particular background colour only applied to the left side of the header, and a different colour applied to the right side of the header. I'm essentially trying to create a split background colour scheme on the header-Container div.

Here is a JSFiddle of where I am at the moment http://jsfiddle.net/1orddfn7/

HTML:

<div id="header-Container">
    <div id="header">
    </div>
</div>

CSS:

#header-Container { background-color: #CCC; position: relative; height: 190px;}
#header { background-color: red; width: 400px; height: 190px; margin-right: auto; margin-left: auto; }

I can't apply two background colours and split them at the 50% mark on the header-container div (I'd like maximum browser compatibility if possible). So I was thinking that I need to create two additional divs such as header-bg-left and header-bg-right and float them left and right respectively of the main center header div. But then I don't understand how to make them fill the remaining space to the edge of the browser window but stop at the edge of the header div. Is there a better way to do this?

---

Solution :

One way is to use :after and :before to create elements with the color you want

#header-Container:before,
#header-Container:after{
    content:'';
    position:absolute;
    z-index:-1;
    width:50%;
    top:0;
    bottom:0;
}
#header-Container:before{left:0;background-color:yellow;}
#header-Container:after{right:0;background-color:green;}

Demo at http://jsfiddle.net/1orddfn7/2/

---

Another is to use a gradient background with two colors.

#header-Container { position: relative; height: 190px;
    background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500));
    background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1 );
}

Demo at http://jsfiddle.net/1orddfn7/3/

(gradient css from http://www.colorzilla.com/gradient-editor/)