Different background-color for left and right half of div

Question

I have a centered div layout. The left side of the div in the background should be white and the right side should be green. Both should extend to infinity.

I think it should be quite simple but I just don't get it right now. Any easy solution? Thank you!

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------

Answer 1

Use the ::after and ::before psuedo elements. That way you can even get three colors and do the Italian flag!

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

Here's a fiddle: http://jsfiddle.net/g8p9pn1v/

And its results:

Answer 2

Add a background image with the two colors to the outer div and allow the browser to scale it (instead of tiling it).

Each color should fill exactly 50% of the width of the image to make sure the colors will never leak on either side.

Maybe even position the image absolutely behind the inner div.

For ideas how to stretch the image, see this question: CSS Background Repeat